import React, { Component } from "react";
import {
    BrowserRouter as Router, Route, Link, Redirect, Switch
} from "react-router-dom";
import {
    Tabs, Card, Layout, Menu, Dropdown, Icon, Button, Modal, Alert, Form, Input, Tooltip, Row, Col, Radio, Avatar, List, Skeleton, Popconfirm, message, Table, Divider, Tag, Checkbox, Drawer, Select, Upload, AutoComplete, notification, DatePicker
} from "antd";


import icon from "../img/icon.png";
import {
    iconFontUrl, inspectitemUploadTemplateUrl, memberUploadTemplateUrl, userUploadTemplateUrl, getAllIdentity
} from "../js/config.js";

import { exportExcel, betterExportExcel } from "../js/utils.js";
import {
    getAllFeaturesApi, addMainFeaturesApi, addChildFeaturesApi, updateChildFeaturesApi, deleteChildFeaturesApi, allDepartmentApi, getDepartmentRoleAndFeaturesApi, getRoleCanAddFeaturesApi, getRootDepartmentApi,
    updateRoleFeaturesApi, deleteRoleApi, addRoleApi, SchoolAllApi, addInspectItemBySchoolIdApi, getAllInspectItemCategoryApi, getInspectItemsByCategoryIdApi, getInspectItemsByPushCategoryIdApi, countBluetoothTypeNumberBySchoolIdApi, 
    getInspectItemsByItemApi, getInspectItemsByContentApi, importPublicMemberListApi, getAllCallBackDeviceApi, addDeviceApi, deleteDeviceApi, updateDeviceApi, addZhiZhouItemBySchoolIdApi, addUserBySchoolIdApi,
    allAdjustUserApi, getUserAdjustSchool, updateUserApi, deleteUserApi, getUserIdentity, updateAdjustUser, getAllCallBackDeviceByConditionApi, allBlueteethDeviceApi, getBlueteethApi, addBlueTeethDeviceApi, deleteBlueTeethDeviceApi, getAllBlueTeethDeviceApi, getAllBlueTeethDeviceByConditionApi, getSafetySceneSearchApi, getSafetySceneSearchChartDataApi, getAllsafetysceneApi, getAllUserApi, getAllExistCategoryApi, getAllSafetySceneByConditionApi
} from "../js/api.js";
// import {Publiczhizhouitemdeploy} from './dutyweek.jsx'
import "../css/test.css";
import SubMenu from "antd/lib/menu/SubMenu";
const IconFont = Icon.createFromIconfontCN({
    scriptUrl: iconFontUrl
});
const { TabPane } = Tabs;
const { Content, Sider, Header } = Layout;
const { Meta } = Card;
const CheckboxGroup = Checkbox.Group;
const FormItem = Form.Item;
const RangePicker = DatePicker.RangePicker
import moment from "moment";

class Permission extends Component {
    constructor(props) {
        super(props);
        let url = document.location.href;
        let page = url.split("/")[4];
        console.log(page, "++++++++++++++")
        let defaultSelectedKeys;
        switch (page) {
            // case "featuresitem":
            //     defaultSelectedKeys = "featuresitem";
            //     break;
            // case "featuresset":
            //     defaultSelectedKeys = "featuresset";
            //     break;
            case "inspectitemdeploy":
                defaultSelectedKeys = "inspectitemdeploy";
                break;
            case "inspectitemquery":
                defaultSelectedKeys = "inspectitemquery";
                break;
            // case "publiclistdeploy":
            //     defaultSelectedKeys = "publiclistdeploy";
            //     break;
            case "devicedeploy":
                defaultSelectedKeys = "devicedeploy";
                break;
            // case "publiczhizhouitemdeploy":
            //     defaultSelectedKeys = "publiczhizhouitemdeploy";
            //     break;
            case "publicuserdeploy":
                defaultSelectedKeys = "publicuserdeploy";
                break;
            case "useradjust":
                defaultSelectedKeys = "useradjust";
                break;
            case "bluetoothDeviceQuery":
                defaultSelectedKeys = "bluetoothDeviceQuery";
                break;
            default:
                defaultSelectedKeys = "devicedeploy";
        }
        this.state = {
            defaultSelectedKeys: [defaultSelectedKeys],
            collapsed: false
        };
    }

    onCollapse = collapsed => {
        if (collapsed) {
            document.getElementById("logoName").style.display = "none";
        } else {
            document.getElementById("logoName").style.display = "inline";
        }
        this.setState({ collapsed });
    };

    componentDidMount() { }

    logOff() {
        sessionStorage.setItem("username", null);
        sessionStorage.setItem("identityId", null);
        sessionStorage.setItem("departmentId", null);
        this.props.history.push("/");
    }

    render() {
        return (
            <Router basename="/system">
                <Layout>
                    <Sider
                        collapsible
                        collapsed={this.state.collapsed}
                        onCollapse={this.onCollapse}
                        width={256}
                        style={{
                            overflow: "auto",
                            height: "100vh",
                            left: 0
                        }}
                    >
                        <div className="logo">
                            {/* <IconFont type="icon-anfang" className='icon' style={{ verticalAlign: "middle", }} /> */}
                            <img
                                src={icon}
                                className="icon"
                                style={{
                                    verticalAlign: "middle",
                                    width: "30px",
                                    height: "30px",
                                    marginRight: "5px"
                                }}
                            />
                            <div
                                id="logoName"
                                style={{
                                    verticalAlign: "middle",
                                    display: "inline-block",
                                    paddingLeft: "5px"
                                }}
                            >
                                梯度智慧安监
                          </div>
                        </div>
                        <Menu
                            theme="dark"
                            mode="inline"
                            defaultSelectedKeys={this.state.defaultSelectedKeys}
                        >
                            {/* <Menu.Item key="featuresitem">
                                <Link to="/featuresitem">
                                    <IconFont type="icon-daohanglan" className="icon" />
                                    <span className="nav-text">功能模块</span>
                                </Link>
                            </Menu.Item> */}
                            {/* <Menu.Item key="featuresset">
                                <Link to="/featuresset">
                                    <IconFont
                                        type="icon-nav-_yonghuquanxianpeizhi"
                                        className="icon"
                                    />
                                    <span className="nav-text">权限配置</span>
                                </Link>
                            </Menu.Item> */}
                            <SubMenu key="inspectitemmanage" title={<span className="nav-text">巡检项管理</span>}>
                                <Menu.Item key="inspectitemdeploy">
                                    <Link to="/inspectitemmanage/inspectitemdeploy">
                                        <IconFont type="icon-42jitixiangmuliebiao" className="icon" />
                                        <span className="nav-text">巡检项导入</span>
                                    </Link>
                                </Menu.Item>
                                <Menu.Item key="inspectitemquery">
                                    <Link to="/inspectitemmanage/inspectitemquery">
                                        <IconFont type="icon-42jitixiangmuliebiao" className="icon" />
                                        <span className="nav-text">巡检项查询</span>
                                    </Link>
                                </Menu.Item>
                            </SubMenu>

                            <SubMenu key="devicedeployManagement" title={<span className="nav-text">设备管理</span>}>
                                <Menu.Item key="blueteethDeviceManagerTotal">
                                    <Link to="/blueteethDeviceManagerTotal">
                                        <IconFont type="icon-mingdan" className="icon" />
                                        <span className="nav-text">蓝牙/NFC设备</span>
                                    </Link>
                                </Menu.Item>
                                <Menu.Item key="devicedeploy">
                                    <Link to="/devicedeploy">
                                        <IconFont type="icon-mingdan" className="icon" />
                                        <span className="nav-text">其他设备</span>
                                    </Link>
                                </Menu.Item>
                            </SubMenu>

                            {/* <Menu.Item key="publiclistdeploy">
                                <Link to="/publiclistdeploy">
                                    <IconFont type="icon-mingdan" className="icon" />
                                    <span className="nav-text">公共名单导入</span>
                                </Link>
                            </Menu.Item> 
                            <Menu.Item key="devicedeploy">
                                <Link to="/devicedeploy">
                                    <IconFont type="icon-mingdan" className="icon" />
                                    <span className="nav-text">设备导入</span>
                                </Link>
                            </Menu.Item> */}
                            {/* <Menu.Item key="publiczhizhouitemdeploy">
                            </Menu.Item>

                            <Menu.Item key="publiczhizhouitemdeploy">
                                <Link to="/publiczhizhouitemdeploy">
                                    <IconFont type="icon-mingdan" className='icon' />
                                    <span className="nav-text">值周项导入</span>
                                </Link>
                            </Menu.Item> */}
                            <SubMenu
                            key="text"
                            title={<span className="nav-text">用户管理</span>}>
                            <Menu.Item key="publicuserdeploy">
                                <Link to="/publicuserdeploy">
                                    <IconFont type="icon-mingdan" className='icon' />
                                    <span className="nav-text">用户信息导入</span>
                                </Link>
                            </Menu.Item>
                            <Menu.Item key="useradjust">
                                <Link to="/useradjust">
                                    <IconFont type="icon-mingdan" className="icon" />
                                    <span className="nav-text">用户调整</span>
                                </Link>
                            </Menu.Item>
                            </SubMenu>
                            <Menu.Item key="bluetoothDeviceQuery">
                                <Link to="/bluetoothDeviceQuery">
                                    <IconFont type="icon-mingdan" className="icon" />
                                    <span className="nav-text">蓝牙设备</span>
                                </Link>
                            </Menu.Item>
                            <Menu.Item key="schoolSafetySceneManagerTotal">
                                <Link to="/schoolSafetySceneManagerTotal">
                                    <IconFont type="icon-mingdan" className='icon' />
                                    <span className="nav-text">隐患管理</span>
                                </Link>
                            </Menu.Item>
                        </Menu>
                    </Sider>
                    <Layout style={{ height: "100vh" }}>
                        <Header
                            style={{
                                background: "#fcfcfc",
                                padding: 0,
                                fontFamily: "Microsoft Yahei, sans-serif",
                                fontSize: 15,
                                position: "relative",
                                height: "64px",
                                lineHeight: "64px"
                            }}
                        >
                            <div
                                style={{ position: "absolute", top: 0, bottom: 0, left: 24 }}
                            >
                                欢迎您！您的身份为
                              <span style={{ color: "#1890ff" }}>权限管理员</span>
                            </div>
                            <div
                                style={{ position: "absolute", top: 0, bottom: 0, right: 24 }}
                            >
                                <Dropdown
                                    overlay={
                                        <Menu>
                                            <Menu.Item>
                                                <a
                                                    class="logOff"
                                                    style={{ color: "#333333", padding: "5px 15px" }}
                                                    onClick={() => this.logOff()}
                                                >
                                                    <IconFont
                                                        type="icon-zhuxiaologout11"
                                                        className="icon"
                                                        style={{
                                                            fontSize: "14px",
                                                            verticalAlign: "middle"
                                                        }}
                                                    />
                                                    <span
                                                        style={{
                                                            verticalAlign: "middle",
                                                            marginLeft: "2px"
                                                        }}
                                                    >
                                                        退出登录
                                                  </span>
                                                </a>
                                            </Menu.Item>
                                        </Menu>
                                    }
                                >
                                    <div
                                        className="dropdown"
                                        style={{
                                            padding: "0px 5px"
                                        }}
                                    >
                                        <IconFont
                                            style={{ fontSize: "28px", verticalAlign: "middle" }}
                                            type="icon-touxiang-shi"
                                            className="icon"
                                        />
                                        <span style={{ marginLeft: "2px" }}>
                                            {sessionStorage.getItem("username")}
                                        </span>
                                    </div>
                                </Dropdown>
                            </div>
                        </Header>
                        <Content style={{ margin: "24px", overflow: "initial" }}>
                            <div
                                id="right"
                                style={{
                                    padding: 24,
                                    background: "#fff",
                                    height: "auto",
                                    marginBottom: 24
                                }}
                            >
                                <Switch>
                                    {/* <Route path="/featuresitem" component={Featuresitem} /> */}
                                    {/* <Route path="/featuresset" component={Featuresset} /> */}
                                    <Route
                                        path="/inspectitemmanage/inspectitemdeploy"
                                        component={Inspectitemdeploy}
                                    />
                                    <Route
                                        path="/inspectitemmanage/inspectitemquery"
                                        component={Inspectitemquery}
                                    />
                                    {/* <Route path="/publiclistdeploy" component={Publiclistdeploy} /> */}
                                    <Route path="/devicedeploy" component={Devicedeploy} />
                                    <Route path="/blueteethDeviceManagerTotal" component={BlueteethDeviceManagerTotal} />
                                    {/* <Route path="/publiczhizhouitemdeploy" component={Publiczhizhouitemdeploy} /> */}
                                    <Route path="/publicuserdeploy" component={Publicuserdeploy} />
                                    <Route path="/useradjust" component={useradjust} />
                                    <Route path="/bluetoothDeviceQuery" component={BlueteethDeviceQuery} />
                                    <Route path="/schoolSafetySceneManagerTotal" component={ SchoolSafetySceneManagerTotal}></Route>
                                    <Redirect path="/" to={{ pathname: "/devicedeploy" }} />
                                
                                </Switch>
                            </div>
                        </Content>
                    </Layout>
                </Layout>
            </Router>
        );
    }
}

// class addMainFeaturesForm extends Component {
//     constructor(props) {
//         super(props);
//         this.state = {
//             mainRoute:
//                 this.props.mainRoute === undefined ? undefined : this.props.mainRoute,
//             mainFeaturesId:
//                 this.props.mainFeaturesId === undefined
//                     ? undefined
//                     : this.props.mainFeaturesId,
//             modelTitle:
//                 this.props.modelTitle === undefined ? undefined : this.props.modelTitle,
//             updateData:
//                 this.props.updateData === undefined ? undefined : this.props.updateData
//         };
//     }

//     componentDidMount() {
//         this.setState({
//             mainRoute:
//                 this.props.mainRoute === undefined ? undefined : this.props.mainRoute,
//             mainFeaturesId:
//                 this.props.mainFeaturesId === undefined
//                     ? undefined
//                     : this.props.mainFeaturesId,
//             modelTitle:
//                 this.props.modelTitle === undefined ? undefined : this.props.modelTitle,
//             updateData:
//                 this.props.updateData === undefined ? undefined : this.props.updateData
//         });
//     }

//     render() {
//         const { mainRoute, mainFeaturesId, modelTitle, updateData } = this.state;
//         let beforeRoute;
//         if (modelTitle == "addMainFeatures") {
//             beforeRoute = "http://tidukeji.cn";
//         } else {
//             beforeRoute = "http://tidukeji.cn" + mainRoute;
//         }

//         const { getFieldDecorator } = this.props.form;
//         const formItemLayout = {
//             labelCol: { span: 5 },
//             wrapperCol: { span: 14 }
//         };
//         return (
//             <Form>
//                 <Form.Item label="名称" {...formItemLayout}>
//                     {getFieldDecorator("name", {
//                         initialValue: updateData == undefined ? null : updateData.name,
//                         rules: [
//                             {
//                                 required: true,
//                                 message: "中文长度不超过8,不能有空格!",
//                                 max: 8,
//                                 type: "string",
//                                 whitespace: true
//                             }
//                         ]
//                     })(
//                         <Input
//                             size="large"
//                             prefix={
//                                 <IconFont
//                                     type="icon-mingcheng"
//                                     style={{ color: "rgba(0,0,0,.25)" }}
//                                 />
//                             }
//                             placeholder="菜单名称"
//                         />
//                     )}
//                 </Form.Item>
//                 <Form.Item
//                     label={
//                         <span>
//                             路由地址&nbsp;
//                             <Tooltip title="相对地址">
//                                 <Icon type="question-circle-o" />
//                             </Tooltip>
//                         </span>
//                     }
//                     {...formItemLayout}
//                 >
//                     {getFieldDecorator("route", {
//                         initialValue: updateData == undefined ? null : updateData.route,
//                         rules: [
//                             {
//                                 required: true,
//                                 message: "请输入路由地址!",
//                                 whitespace: true
//                             },
//                             {
//                                 required: false,
//                                 pattern: new RegExp(/^\/.+$/, "g"),
//                                 message: "请以“/”开头填写路由地址"
//                             }
//                         ]
//                     })(
//                         <Input
//                             size="large"
//                             prefix={
//                                 <IconFont
//                                     type="icon-luyou"
//                                     style={{ color: "rgba(0,0,0,.25)" }}
//                                 />
//                             }
//                             addonBefore={beforeRoute}
//                             placeholder="路由地址"
//                         />
//                     )}
//                 </Form.Item>
//                 <Form.Item
//                     label={
//                         <span>
//                             key&nbsp;
//                             <Tooltip title="key值用于改变导航栏菜单高亮和展开">
//                                 <Icon type="question-circle-o" />
//                             </Tooltip>
//                         </span>
//                     }
//                     {...formItemLayout}
//                 >
//                     {getFieldDecorator("key", {
//                         initialValue: updateData == undefined ? null : updateData.key,
//                         rules: [
//                             {
//                                 required: true,
//                                 message: "请输入key值!",
//                                 whitespace: true
//                             }
//                         ]
//                     })(
//                         <Input
//                             size="large"
//                             prefix={
//                                 <IconFont
//                                     type="icon-key"
//                                     style={{ color: "rgba(0,0,0,.25)" }}
//                                 />
//                             }
//                             placeholder="key"
//                         />
//                     )}
//                 </Form.Item>
//                 <Form.Item
//                     label={
//                         <span>
//                             icon&nbsp;
//                             <Tooltip title="icon值为项目矢量图库图标代码">
//                                 <Icon type="question-circle-o" />
//                             </Tooltip>
//                         </span>
//                     }
//                     {...formItemLayout}
//                 >
//                     {getFieldDecorator("icon", {
//                         initialValue: updateData == undefined ? null : updateData.icon,
//                         rules: [
//                             {
//                                 required: true,
//                                 message: "请输入icon值!",
//                                 whitespace: true
//                             }
//                         ]
//                     })(
//                         <Input
//                             size="large"
//                             prefix={
//                                 <IconFont
//                                     type="icon-tubiao"
//                                     style={{ color: "rgba(0,0,0,.25)" }}
//                                 />
//                             }
//                             placeholder="icon"
//                         />
//                     )}
//                 </Form.Item>
//                 <Form.Item
//                     label={
//                         <span>
//                             description&nbsp;
//                             <Tooltip title="该功能的描述、介绍">
//                                 <Icon type="question-circle-o" />
//                             </Tooltip>
//                         </span>
//                     }
//                     {...formItemLayout}
//                 >
//                     {getFieldDecorator("description", {
//                         initialValue:
//                             updateData == undefined ? null : updateData.description,
//                         rules: [
//                             {
//                                 required: true,
//                                 message: "请输入简要介绍!"
//                             }
//                         ]
//                     })(
//                         <Input
//                             size="large"
//                             prefix={
//                                 <IconFont
//                                     type="icon-miaoshu1"
//                                     style={{ color: "rgba(0,0,0,.25)" }}
//                                 />
//                             }
//                             placeholder="icon"
//                         />
//                     )}
//                 </Form.Item>
//             </Form>
//         );
//     }
// }

// const AddMainFeaturesForm = Form.create()(addMainFeaturesForm);

// class Featuresitem extends Component {
//     constructor(props) {
//         super(props);
//         this.state = {
//             addFeatures: false,
//             confirmLoading: false,
//             mainFeaturesId: undefined,
//             mainRoute: undefined,
//             modelTitle: undefined,
//             cardLoading: false,
//             data: [],
//             key: 0,
//             initLoading: false,
//             updateData: undefined,
//             alertVisible: false
//         };
//     }

//     refreshData() {
//         const data = [];
//         this.setState({
//             cardLoading: true,
//             initLoading: true
//         });
//         getAllFeaturesApi()
//             .then(res => {
//                 res.data.forEach((item, index) => {
//                     data.push({
//                         key: index,
//                         id: item.id,
//                         name: item.name,
//                         description: item.description,
//                         route: item.route,
//                         icon: item.icon,
//                         order: item.order,
//                         childFeatures: item.childFeatures,
//                         keyformenu: item.key
//                     });
//                 });
//                 this.setState({
//                     data: data,
//                     cardLoading: false,
//                     initLoading: false
//                 });
//                 if (this.state.mainRoute === undefined) {
//                     this.setState({
//                         mainRoute: data[0].route
//                     });
//                 }
//             })
//             .catch(e => {
//                 if (e.response) {
//                     //请求已发出，服务器返回状态码不是2xx。
//                     console.info(e.response.data);
//                     console.info(e.response.status);
//                     console.info(e.response.headers);
//                 } else if (e.request) {
//                     // 请求已发出，但没有收到响应
//                     // e.request 在浏览器里是一个XMLHttpRequest实例，
//                     // 在node中是一个http.ClientRequest实例
//                     console.info(e.request);
//                 } else {
//                     //发送请求时异常，捕捉到错误
//                     console.info("error", e.message);
//                 }
//                 console.info(e.config);
//             });
//     }

//     componentDidMount() {
//         this.refreshData();
//     }

//     onClickCard(d) {
//         this.setState({
//             key: d.key,
//             mainRoute: d.route
//         });
//     }

//     onDelete(id) {
//         this.setState({
//             initLoading: true,
//             cardLoading: true
//         });
//         deleteChildFeaturesApi(id)
//             .then(res => {
//                 if (res.data == "success") {
//                     message.success("删除子功能模块成功！");
//                     this.refreshData();
//                 } else {
//                     this.setState({
//                         msg: "删除子功能模块失败！"
//                     });
//                 }
//                 this.setState({
//                     cardLoading: false,
//                     initLoading: false
//                 });
//             })
//             .catch(e => {
//                 if (e.response) {
//                     //请求已发出，服务器返回状态码不是2xx。
//                     console.info(e.response.data);
//                     console.info(e.response.status);
//                     console.info(e.response.headers);
//                 } else if (e.request) {
//                     // 请求已发出，但没有收到响应
//                     // e.request 在浏览器里是一个XMLHttpRequest实例，
//                     // 在node中是一个http.ClientRequest实例
//                     console.info(e.request);
//                 } else {
//                     //发送请求时异常，捕捉到错误
//                     console.info("error", e.message);
//                 }
//                 console.info(e.config);
//             });
//     }

//     addModelVisable(type, item) {
//         this.setState({
//             addFeatures: true,
//             modelTitle: type,
//             loading: true,
//             updateData: item
//         });
//     }

//     handleCancel() {
//         this.setState({
//             addFeatures: false,
//             confirmLoading: false,
//             loading: false
//         });
//     }

//     // 关闭模态框错误提示
//     handleClose = () => {
//         this.setState({ alertVisible: false });
//     };

//     commitForm(type) {
//         this.setState({
//             confirmLoading: true,
//             initLoading: true,
//             cardLoading: true
//         });
//         const data = this.state.data;
//         let updateData = this.state.updateData;
//         let key = this.state.key;
//         let val = this.refs.addMainFeaturesForm;
//         val.validateFields((err, values) => {
//             if (!err) {
//                 let parent = 0;
//                 let order = 0;
//                 if (type == "addMainFeatures") {
//                     parent = 0;
//                     if (data.length > 0) {
//                         order = data[data.length - 1].order + 1;
//                     } else {
//                         order = 1;
//                     }
//                     addMainFeaturesApi(values, order)
//                         .then(res => {
//                             if (res.data == "success") {
//                                 message.success("新增主功能模块成功！");
//                                 this.handleCancel(); //关闭模态框
//                                 this.refreshData();
//                             } else if (res.data == "contained") {
//                                 message.error("功能或路由地址已存在，请修改！");
//                             } else {
//                                 message.error("新增主功能模块失败，请检查表单内容");
//                             }
//                             this.setState({
//                                 confirmLoading: false,
//                                 initLoading: false,
//                                 cardLoading: false
//                             });
//                         })
//                         .catch(e => {
//                             if (e.response) {
//                                 //请求已发出，服务器返回状态码不是2xx。
//                                 console.info(e.response.data);
//                                 console.info(e.response.status);
//                                 console.info(e.response.headers);
//                             } else if (e.request) {
//                                 // 请求已发出，但没有收到响应
//                                 // e.request 在浏览器里是一个XMLHttpRequest实例，
//                                 // 在node中是一个http.ClientRequest实例
//                                 console.info(e.request);
//                             } else {
//                                 //发送请求时异常，捕捉到错误
//                                 console.info("error", e.message);
//                             }
//                             console.info(e.config);
//                         });
//                 } else if (type == "addchildFeatures") {
//                     let childFeatures = data[key].childFeatures;
//                     parent = data[key].id;
//                     order =
//                         childFeatures.length === 0
//                             ? 1
//                             : childFeatures[childFeatures.length - 1].order + 1;

//                     addChildFeaturesApi(values, parent, order)
//                         .then(res => {
//                             if (res.data == "success") {
//                                 message.success("新增子功能模块成功！");
//                                 this.handleCancel(); //关闭模态框
//                                 this.refreshData();
//                             } else if (res.data == "contained") {
//                                 message.error("功能或路由地址已存在，请修改！");
//                             } else {
//                                 message.error("新增子功能模块失败，请检查表单内容");
//                             }
//                             this.setState({
//                                 confirmLoading: false,
//                                 initLoading: false,
//                                 cardLoading: false
//                             });
//                         })
//                         .catch(e => {
//                             if (e.response) {
//                                 //请求已发出，服务器返回状态码不是2xx。
//                                 console.info(e.response.data);
//                                 console.info(e.response.status);
//                                 console.info(e.response.headers);
//                             } else if (e.request) {
//                                 // 请求已发出，但没有收到响应
//                                 // e.request 在浏览器里是一个XMLHttpRequest实例，
//                                 // 在node中是一个http.ClientRequest实例
//                                 console.info(e.request);
//                             } else {
//                                 //发送请求时异常，捕捉到错误
//                                 console.info("error", e.message);
//                             }
//                             console.info(e.config);
//                         });
//                 } else if (type == "update") {
//                     updateChildFeaturesApi(values, updateData.id)
//                         .then(res => {
//                             if (res.data == "success") {
//                                 message.success("更新子功能模块成功！");
//                                 this.handleCancel(); //关闭模态框
//                                 this.refreshData();
//                             } else if (res.data == "contained") {
//                                 message.error("功能或路由地址已存在，请修改！");
//                             } else {
//                                 message.error("更新功能模块失败，请检查表单内容");
//                             }
//                             this.setState({
//                                 confirmLoading: false,
//                                 initLoading: false,
//                                 cardLoading: false
//                             });
//                         })
//                         .catch(e => {
//                             if (e.response) {
//                                 //请求已发出，服务器返回状态码不是2xx。
//                                 console.info(e.response.data);
//                                 console.info(e.response.status);
//                                 console.info(e.response.headers);
//                             } else if (e.request) {
//                                 // 请求已发出，但没有收到响应
//                                 // e.request 在浏览器里是一个XMLHttpRequest实例，
//                                 // 在node中是一个http.ClientRequest实例
//                                 console.info(e.request);
//                             } else {
//                                 //发送请求时异常，捕捉到错误
//                                 console.info("error", e.message);
//                             }
//                             console.info(e.config);
//                         });
//                 }
//             }
//         });
//     }

//     render() {
//         const { initLoading, loading, data, key } = this.state;
//         const gridStyle = {
//             width: "100%",
//             textAlign: "center"
//         };

//         const gridStyleChoose = {
//             width: "100%",
//             textAlign: "center",
//             background: "#f3f9f1"
//         };

//         const cardGrid = data.map((d, index) => (
//             <Card.Grid
//                 style={d.key == key ? gridStyleChoose : gridStyle}
//                 onClick={() => this.onClickCard(d)}
//             >
//                 <Meta
//                     avatar={
//                         <IconFont
//                             type={d.icon}
//                             style={{
//                                 fontSize: "30px"
//                             }}
//                         />
//                     }
//                     title={d.name}
//                     description={
//                         <div
//                             title={d.description}
//                             style={{
//                                 textOverflow: "ellipsis",
//                                 whiteSpace: "nowrap",
//                                 overflow: "hidden"
//                             }}
//                         >
//                             {d.description}
//                         </div>
//                     }
//                 />
//             </Card.Grid>
//         ));
//         const loadMore =
//             !initLoading && !loading ? (
//                 <div
//                     style={{
//                         textAlign: "center",
//                         marginTop: 12,
//                         height: 32,
//                         lineHeight: "32px"
//                     }}
//                 >
//                     <Button onClick={() => this.addModelVisable("addchildFeatures")}>
//                         add more
//               </Button>
//                 </div>
//             ) : null;

//         let list = data.length !== 0 ? data[key].childFeatures : [];

//         return (
//             <Row
//                 justify="space-around"
//                 gutter="48"
//                 style={{
//                     background: "#fff",
//                     height: "auto"
//                 }}
//             >
//                 <Col
//                     span={5}
//                     className="inner"
//                     id="right"
//                     style={{
//                         background: "#fff",
//                         height: "100%"
//                     }}
//                 >
//                     <Button
//                         type="primary"
//                         onClick={() => this.addModelVisable("addMainFeatures")}
//                         style={{
//                             marginBottom: "20px"
//                         }}
//                     >
//                         addFeatures
//                     </Button>
//                     <Modal
//                         destroyOnClose
//                         title={
//                             this.state.modelTitle == "update"
//                                 ? "更新子功能模块"
//                                 : "新增功能模块"
//                         }
//                         width={1000}
//                         visible={this.state.addFeatures}
//                         onCancel={() => this.handleCancel()}
//                         closable
//                         footer={[
//                             <Button
//                                 key="submit"
//                                 type="primary"
//                                 size="large"
//                                 loading={this.state.confirmLoading}
//                                 onClick={() => {
//                                     this.commitForm(this.state.modelTitle);
//                                 }}
//                             >
//                                 提交
//                           </Button>
//                         ]}
//                     >
//                         <AddMainFeaturesForm
//                             ref="addMainFeaturesForm"
//                             mainFeaturesId={this.state.mainFeaturesId}
//                             mainRoute={this.state.mainRoute}
//                             modelTitle={this.state.modelTitle}
//                             updateData={this.state.updateData}
//                         />
//                     </Modal>
//                     <Card
//                         className="innerbox"
//                         loading={this.state.cardLoading}
//                         bordered={false}
//                         style={{
//                             width: "100%",
//                             height: "560px"
//                         }}
//                     >
//                         {cardGrid}
//                     </Card>
//                 </Col>
//                 <Col
//                     span={19}
//                     style={{
//                         marginTop: "40px"
//                     }}
//                 >
//                     <List
//                         className="demo-loadmore-list"
//                         loading={initLoading}
//                         itemLayout="horizontal"
//                         dataSource={list}
//                         loadMore={loadMore}
//                         renderItem={item => (
//                             <List.Item
//                                 actions={[
//                                     <Popconfirm
//                                         title="Are you sure delete this feature?"
//                                         onConfirm={() => this.onDelete(item.id)}
//                                         okText="Yes"
//                                         cancelText="No"
//                                     >
//                                         <a href="#">Delete</a>
//                                     </Popconfirm>,
//                                     <a
//                                         href="#"
//                                         onClick={() => this.addModelVisable("update", item)}
//                                     >
//                                         Update
//                                   </a>
//                                 ]}
//                             >
//                                 <Skeleton avatar title={false} loading={item.loading} active>
//                                     <List.Item.Meta
//                                         avatar={
//                                             <IconFont
//                                                 type={item.icon}
//                                                 style={{
//                                                     fontSize: "30px"
//                                                 }}
//                                             />
//                                         }
//                                         title={<a>{item.name}</a>}
//                                         description={
//                                             <div
//                                                 title={item.description}
//                                                 style={{
//                                                     textOverflow: "ellipsis",
//                                                     whiteSpace: "nowrap",
//                                                     overflow: "hidden"
//                                                 }}
//                                             >
//                                                 {item.description}
//                                             </div>
//                                         }
//                                     />
//                                 </Skeleton>
//                                 <div>{item.route}</div>
//                             </List.Item>
//                         )}
//                     />
//                 </Col>
//             </Row>
//         );
//     }
// }

// class Featuresset extends Component {
//     constructor(props) {
//         super(props);
//         this.state = {
//             tableData: [],
//             tableLoading: false
//         };
//     }

//     componentDidMount() {
//         this.refreshData();
//     }
//     refreshData() {
//         this.setState({
//             tableLoading: true
//         });
//         allDepartmentApi()
//             .then(res => {
//                 this.setState({
//                     tableData: res.data,
//                     tableLoading: false
//                 });
//             })
//             .catch(e => {
//                 if (e.response) {
//                     //请求已发出，服务器返回状态码不是2xx。
//                     console.info(e.response.data);
//                     console.info(e.response.status);
//                     console.info(e.response.headers);
//                 } else if (e.request) {
//                     // 请求已发出，但没有收到响应
//                     // e.request 在浏览器里是一个XMLHttpRequest实例，
//                     // 在node中是一个http.ClientRequest实例
//                     console.info(e.request);
//                 } else {
//                     //发送请求时异常，捕捉到错误
//                     console.info("error", e.message);
//                 }
//                 console.info(e.config);
//             });
//     }

//     render() {
//         // 外部表格表头
//         const departmentColumns = [
//             {
//                 title: "序号",
//                 dataIndex: "id",
//                 key: "id",
//                 render: (text, record, index) => `${index + 1}`
//             },
//             {
//                 title: "类型",
//                 dataIndex: "type",
//                 key: "type"
//             },
//             {
//                 title: "单位名称",
//                 dataIndex: "name",
//                 key: "name"
//             },
//             {
//                 title: "地址",
//                 dataIndex: "address",
//                 key: "address"
//             }
//         ];
//         return (
//             <Table
//                 dataSource={this.state.tableData}
//                 columns={departmentColumns}
//                 loading={this.state.tableLoading}
//                 locale={{ emptyText: "暂无数据" }}
//                 expandedRowRender={record => {
//                     return (
//                         <FeaturesInnerTable
//                             departmentId={record.id}
//                             departmentName={record.name}
//                         />
//                     );
//                 }}
//                 rowClassName={(record, index) =>
//                     index % 2 === 0 ? "rowOne" : "rowTwo"
//                 }
//                 pagination={{
//                     //分页
//                     total: this.state.tableData.length, //数据总数量
//                     defaultPageSize: 10, //默认显示几条一页
//                     //pageSize: 10,
//                     showTotal: function (total) {
//                         //设置显示一共几条数据
//                         return "共 " + total + " 条数据";
//                     },
//                     showSizeChanger: true,
//                     showQuickJumper: true,
//                     pageSizeOptions: [5, 10, 20, 30]
//                 }}
//             />
//         );
//     }
// }

// class FeaturesInnerTable extends Component {
//     constructor(props) {
//         super(props);
//         this.state = {
//             tableLoading: true,
//             tableData: [],
//             departmentId: props.departmentId,
//             departmentName: props.departmentName,
//             mouseEnterRow: "",
//             drawervisable: false,
//             alertVisible: false,
//             msg: "",
//             role: "",
//             roleId: 0,
//             mainFeatures: [],
//             addButtonLoading: false,
//             updateButtonLoading: false,
//             addRoleVisable: false,
//             confirmLoading: false
//         };
//     }

//     componentDidMount() {
//         this.refreshData();
//     }

//     refreshData() {
//         this.setState({
//             tableLoading: true
//         });
//         getDepartmentRoleAndFeaturesApi(this.state.departmentId)
//             .then(res => {
//                 this.setState({
//                     tableLoading: false,
//                     tableData: res.data
//                 });
//             })
//             .catch(e => {
//                 if (e.response) {
//                     //请求已发出，服务器返回状态码不是2xx。
//                     console.info(e.response.data);
//                     console.info(e.response.status);
//                     console.info(e.response.headers);
//                 } else if (e.request) {
//                     // 请求已发出，但没有收到响应
//                     // e.request 在浏览器里是一个XMLHttpRequest实例，
//                     // 在node中是一个http.ClientRequest实例
//                     console.info(e.request);
//                 } else {
//                     //发送请求时异常，捕捉到错误
//                     console.info("error", e.message);
//                 }
//                 console.info(e.config);
//             });
//     }

//     showDrawer = record => {
//         this.setState({
//             drawervisable: true,
//             role: record.rolename,
//             roleId: record.id
//         });
//     };

//     showModal = () => {
//         this.setState({
//             addRoleVisable: true
//         });
//     };

//     deleteRole = roleId => {
//         this.setState({
//             addButtonLoading: true,
//             tableLoading: true
//         });
//         deleteRoleApi(roleId)
//             .then(res => {
//                 if (res.data == "success") {
//                     message.success("删除角色成功！");
//                     this.refreshData();
//                 } else {
//                     this.setState({
//                         msg: "删除失败！"
//                     });
//                 }
//                 this.setState({
//                     addButtonLoading: false
//                 });
//             })
//             .catch(e => {
//                 if (e.response) {
//                     //请求已发出，服务器返回状态码不是2xx。
//                     console.info(e.response.data);
//                     console.info(e.response.status);
//                     console.info(e.response.headers);
//                 } else if (e.request) {
//                     // 请求已发出，但没有收到响应
//                     // e.request 在浏览器里是一个XMLHttpRequest实例，
//                     // 在node中是一个http.ClientRequest实例
//                     console.info(e.request);
//                 } else {
//                     //发送请求时异常，捕捉到错误
//                     console.info("error", e.message);
//                 }
//                 console.info(e.config);
//             });
//     };

//     setPermission() {
//         this.setState({
//             updateButtonLoading: true
//         });
//         let val = this.refs.FeaturesForm;
//         val.validateFields((err, values) => {
//             if (!err) {
//                 updateRoleFeaturesApi(this.state.roleId, values.childFeaturesId)
//                     .then(res => {
//                         if (res.data == "success") {
//                             message.success("权限配置成功！");
//                             this.handleCancel(); //关闭抽屉
//                             this.refreshData();
//                         } else {
//                             this.setState({
//                                 alertVisible: true,
//                                 msg: "权限配置失败，请检查表单信息！"
//                             });
//                         }
//                         this.setState({
//                             updateButtonLoading: false
//                         });
//                     })
//                     .catch(e => {
//                         if (e.response) {
//                             //请求已发出，服务器返回状态码不是2xx。
//                             console.info(e.response.data);
//                             console.info(e.response.status);
//                             console.info(e.response.headers);
//                         } else if (e.request) {
//                             // 请求已发出，但没有收到响应
//                             // e.request 在浏览器里是一个XMLHttpRequest实例，
//                             // 在node中是一个http.ClientRequest实例
//                             console.info(e.request);
//                         } else {
//                             //发送请求时异常，捕捉到错误
//                             console.info("error", e.message);
//                         }
//                         console.info(e.config);
//                     });
//             } else {
//                 this.setState({
//                     updateButtonLoading: false
//                 });
//             }
//         });
//     }

//     addRole = () => {
//         this.setState({
//             confirmLoading: true,
//             addButtonLoading: true
//         });
//         let val = this.refs.AddRoleForm;
//         val.validateFields((err, values) => {
//             if (!err) {
//                 addRoleApi(this.state.departmentId, values.role, values.description)
//                     .then(res => {
//                         if (res.data == "success") {
//                             message.success("新增角色成功！");
//                             this.handleCancelModal(); //关闭模态框
//                             this.refreshData();
//                         } else {
//                             this.setState({
//                                 alertVisible: true,
//                                 msg: "新增角色失败！"
//                             });
//                         }
//                         this.setState({
//                             confirmLoading: false,
//                             addButtonLoading: false
//                         });
//                     })
//                     .catch(e => {
//                         if (e.response) {
//                             //请求已发出，服务器返回状态码不是2xx。
//                             console.info(e.response.data);
//                             console.info(e.response.status);
//                             console.info(e.response.headers);
//                         } else if (e.request) {
//                             // 请求已发出，但没有收到响应
//                             // e.request 在浏览器里是一个XMLHttpRequest实例，
//                             // 在node中是一个http.ClientRequest实例
//                             console.info(e.request);
//                         } else {
//                             //发送请求时异常，捕捉到错误
//                             console.info("error", e.message);
//                         }
//                         console.info(e.config);
//                     });
//             }
//         });
//     };

//     // 关闭抽屉
//     handleCancel = () => {
//         this.setState({
//             msg: "",
//             drawervisable: false,
//             role: "",
//             roleId: 0
//         });
//     };

//     // 关闭模态框
//     handleCancelModal = () => {
//         this.setState({
//             alertVisible: false,
//             msg: "",
//             addRoleVisable: false
//         });
//     };

//     // 关闭模态框错误提示
//     handleClose = () => {
//         this.setState({ alertVisible: false });
//     };

//     render() {
//         const roleColumns = [
//             {
//                 title: "用户角色",
//                 dataIndex: "rolename",
//                 key: "rolename",
//                 width: "10%"
//             },
//             {
//                 title: "主功能模块",
//                 dataIndex: "features",
//                 key: "features",
//                 width: "60%",
//                 render: (text, record, index) => {
//                     const tags = record.childFeatures.map(row => (
//                         <Tag color="orange">{row.name}</Tag>
//                     ));
//                     return <div>{tags}</div>;
//                 }
//             },
//             {
//                 title: "描述",
//                 dataIndex: "description",
//                 key: "description",
//                 width: "20%",
//                 render: (text, record, index) => {
//                     return (
//                         <div
//                             title={record.description}
//                             style={{
//                                 textOverflow: "ellipsis",
//                                 whiteSpace: "nowrap",
//                                 overflow: "hidden"
//                             }}
//                         >
//                             {record.description}
//                         </div>
//                     );
//                 }
//             },
//             {
//                 title: "操作详情",
//                 key: "action",
//                 width: "10%",
//                 render: (text, record) => (
//                     <span>
//                         <a href="javascript:;" onClick={() => this.showDrawer(record)}>
//                             Manage
//                       </a>
//                         <Divider type="vertical" />
//                         <Popconfirm
//                             title="Are you sure delete this role?"
//                             onConfirm={() => this.deleteRole(record.id)}
//                             okText="Yes"
//                             cancelText="No"
//                         >
//                             <a href="javascript:;">Delete</a>
//                         </Popconfirm>
//                     </span>
//                 )
//             }
//         ];
//         return (
//             <div
//                 style={{
//                     textAlign: "center"
//                 }}
//             >
//                 <Table
//                     columns={roleColumns}
//                     dataSource={this.state.tableData}
//                     pagination={false}
//                     loading={this.state.tableLoading}
//                     locale={{ emptyText: "暂无数据" }}
//                     bordered={true}
//                     rowClassName={(record, index) => {
//                         let className = "";
//                         index % 2 === 0
//                             ? (className = "mytr rowOne")
//                             : (className = "mytr rowTwo");
//                         record.identity === this.state.mouseEnterRow
//                             ? (className += " mouseEnterRow")
//                             : (className += "");
//                         return className;
//                     }}
//                     onRow={record => {
//                         return {
//                             onMouseEnter: event => {
//                                 this.setState({
//                                     mouseEnterRow: record.identity
//                                 });
//                             }, // 鼠标移入行
//                             onMouseLeave: event => {
//                                 this.setState({
//                                     mouseEnterRow: ""
//                                 });
//                             }
//                         };
//                     }}
//                 />
//                 <Drawer
//                     title="权限配置"
//                     width={1000}
//                     destroyOnClose
//                     visible={this.state.drawervisable}
//                     onClose={() => {
//                         this.handleCancel();
//                     }}
//                     closable
//                 >
//                     <FeaturesForm
//                         ref="FeaturesForm"
//                         role={this.state.role}
//                         roleId={this.state.roleId}
//                         departmentName={this.state.departmentName}
//                     />
//                     {this.state.alertVisible ? (
//                         <Row>
//                             <Col offset={5} span={14}>
//                                 <Alert
//                                     message={this.state.msg}
//                                     type="error"
//                                     closable
//                                     afterClose={() => {
//                                         this.handleClose();
//                                     }}
//                                 />
//                             </Col>
//                         </Row>
//                     ) : null}
//                     <div
//                         style={{
//                             position: "absolute",
//                             left: 0,
//                             bottom: 0,
//                             width: "100%",
//                             borderTop: "1px solid #e9e9e9",
//                             padding: "10px 16px",
//                             background: "#fff",
//                             textAlign: "right"
//                         }}
//                     >
//                         <Button
//                             type="primary"
//                             size="large"
//                             loading={this.state.updateButtonLoading}
//                             onClick={() => this.setPermission()}
//                         >
//                             保存
//                       </Button>
//                     </div>
//                 </Drawer>
//                 <Modal
//                     destroyOnClose
//                     title="新增角色"
//                     width={1000}
//                     visible={this.state.addRoleVisable}
//                     onCancel={() => this.handleCancelModal()}
//                     closable
//                     footer={[
//                         <Button
//                             key="submit"
//                             type="primary"
//                             size="large"
//                             loading={this.state.confirmLoading}
//                             onClick={() => {
//                                 this.addRole();
//                             }}
//                         >
//                             提交
//                       </Button>
//                     ]}
//                 >
//                     <AddRoleForm
//                         ref="AddRoleForm"
//                         departmentName={this.state.departmentName}
//                     />
//                 </Modal>
//                 <Button
//                     type="primary"
//                     style={{
//                         marginTop: "20px"
//                     }}
//                     onClick={() => this.showModal()}
//                     loading={this.state.addButtonLoading}
//                 >
//                     addRole
//               </Button>
//             </div>
//         );
//     }
// }

// class featuresForm extends Component {
//     constructor(props) {
//         super(props);
//         this.state = {
//             role: props.role,
//             roleId: props.roleId,
//             departmentName: props.departmentName,
//             checkLoading: false,
//             data: []
//         };
//     }

//     componentDidMount() {
//         const data = [];
//         this.setState({
//             checkLoading: true
//         });
//         getRoleCanAddFeaturesApi(this.state.roleId)
//             .then(res => {
//                 res.data.forEach((item, index) => {
//                     data.push({
//                         id: item.id,
//                         name: item.name,
//                         childFeatures: item.childFeatures
//                     });
//                 });
//                 this.setState({
//                     data: data,
//                     checkLoading: false
//                 });
//             })
//             .catch(e => {
//                 if (e.response) {
//                     //请求已发出，服务器返回状态码不是2xx。
//                     console.info(e.response.data);
//                     console.info(e.response.status);
//                     console.info(e.response.headers);
//                 } else if (e.request) {
//                     // 请求已发出，但没有收到响应
//                     // e.request 在浏览器里是一个XMLHttpRequest实例，
//                     // 在node中是一个http.ClientRequest实例
//                     console.info(e.request);
//                 } else {
//                     //发送请求时异常，捕捉到错误
//                     console.info("error", e.message);
//                 }
//                 console.info(e.config);
//             });
//     }

//     render() {
//         const { getFieldDecorator } = this.props.form;
//         const formItemLayout = {
//             labelCol: { span: 3 },
//             wrapperCol: { span: 17 }
//         };
//         let checkMenu = [];
//         let checked = [];
//         if (this.state.data.length > 0) {
//             checkMenu = this.state.data.map(val => {
//                 let tmp = val.childFeatures.map(childVal => {
//                     childVal.used === 1 ? checked.push(childVal.id) : null;
//                     return (
//                         <Col span={6} style={{ margin: "4px 0" }}>
//                             <Checkbox value={childVal.id}>{childVal.name}</Checkbox>
//                         </Col>
//                     );
//                 });
//                 return (
//                     <Row>
//                         <Row gutter="8">{tmp}</Row>
//                         <Divider
//                             style={{ margin: "6px 0", fontSize: "15px", color: "#a1afc9" }}
//                         >
//                             {val.name}
//                         </Divider>
//                     </Row>
//                 );
//             });
//         }
//         return (
//             <Skeleton loading={this.state.checkLoading} active>
//                 <Form>
//                     <Form.Item label="单位名称" {...formItemLayout}>
//                         {getFieldDecorator("department", {
//                             initialValue: this.state.departmentName
//                         })(
//                             <Input
//                                 size="large"
//                                 prefix={
//                                     <IconFont
//                                         type="icon-jiaoyuju"
//                                         style={{ color: "rgba(0,0,0,.25)" }}
//                                     />
//                                 }
//                                 placeholder="单位名称"
//                                 disabled={true}
//                             />
//                         )}
//                     </Form.Item>
//                     <Form.Item label="用户角色" {...formItemLayout}>
//                         {getFieldDecorator("role", {
//                             initialValue: this.state.role
//                         })(
//                             <Input
//                                 size="large"
//                                 prefix={
//                                     <IconFont
//                                         type="icon-team"
//                                         style={{ color: "rgba(0,0,0,.25)" }}
//                                     />
//                                 }
//                                 placeholder="用户角色"
//                                 disabled={true}
//                             />
//                         )}
//                     </Form.Item>
//                     <Form.Item label="权限" {...formItemLayout}>
//                         {getFieldDecorator("childFeaturesId", {
//                             initialValue: checked
//                         })(
//                             <Checkbox.Group style={{ marginTop: "10px" }}>
//                                 {checkMenu}
//                             </Checkbox.Group>
//                         )}
//                     </Form.Item>
//                 </Form>
//             </Skeleton>
//         );
//     }
// }
// const FeaturesForm = Form.create()(featuresForm);

// class addRoleForm extends Component {
//     constructor(props) {
//         super(props);
//         this.state = {
//             departmentName: props.departmentName
//         };
//     }

//     render() {
//         const formItemLayout = {
//             labelCol: { span: 4 },
//             wrapperCol: { span: 15 }
//         };
//         const { getFieldDecorator } = this.props.form;
//         return (
//             <Form>
//                 <Form.Item label="单位名称" {...formItemLayout}>
//                     {getFieldDecorator("department", {
//                         initialValue: this.state.departmentName
//                     })(
//                         <Input
//                             size="large"
//                             prefix={
//                                 <IconFont
//                                     type="icon-jiaoyuju"
//                                     style={{ color: "rgba(0,0,0,.25)" }}
//                                 />
//                             }
//                             placeholder="单位名称"
//                             disabled={true}
//                         />
//                     )}
//                 </Form.Item>
//                 <Form.Item label="用户角色" {...formItemLayout}>
//                     {getFieldDecorator("role", {
//                         rules: [
//                             {
//                                 required: true,
//                                 message: "请输入角色名"
//                             }
//                         ]
//                     })(
//                         <Input
//                             size="large"
//                             prefix={
//                                 <IconFont
//                                     type="icon-team"
//                                     style={{ color: "rgba(0,0,0,.25)" }}
//                                 />
//                             }
//                             placeholder="角色名称"
//                         />
//                     )}
//                 </Form.Item>
//                 <Form.Item label="描述" {...formItemLayout}>
//                     {getFieldDecorator("description", {
//                         rules: [
//                             {
//                                 required: true,
//                                 message: "请输入简要介绍!"
//                             }
//                         ]
//                     })(
//                         <Input
//                             size="large"
//                             prefix={
//                                 <IconFont
//                                     type="icon-miaoshu1"
//                                     style={{ color: "rgba(0,0,0,.25)" }}
//                                 />
//                             }
//                             placeholder="该角色的描述、介绍"
//                         />
//                     )}
//                 </Form.Item>
//             </Form>
//         );
//     }
// }
// const AddRoleForm = Form.create()(addRoleForm);

class inspectitemdeploy extends Component {
    constructor(props) {
        super(props);
        this.state = {
            // members: [],
            // schoolId: 0,
            fileList: [],
            uploading: false
        };
    }

    // componentDidMount() {
    //     const avaliablemembers = [];
        // SchoolAllApi().then(res => {
        //     res.data.forEach((item, index) => {
        //         //console.log("getAllUser", item);
        //         avaliablemembers.push({
        //             name: item.name,
        //             value: item.id,
        //             address: item.address
        //         });
        //     });
        //     this.setState({
        //         members: avaliablemembers
        //     });
        // });
    // }

    handleSubmit = e => {
        e.preventDefault();
        const { fileList } = this.state;
        // console.log(fileList);
        const formData = new FormData();
        fileList.forEach(file => {
            formData.append("upfile", file);
        });
        this.setState({
            uploading: true
        });
        this.props.form.validateFields((err, values) => {
            if (!err) {
                formData.append("schoolId", 0);
                formData.append("type", 1);
                formData.append("isCheck", 0);
                console.log(formData.get("schoolId"));
                addInspectItemBySchoolIdApi(formData)
                    .then(res => {
                        if (res.data === "success") {
                            message.success("上传成功！");
                            this.props.form.resetFields();
                        } else {
                            message.error(res.data);
                        }
                        this.setState({
                            uploading: false,
                            fileList: []
                        });
                    })
                    .catch(e => {
                        if (e.response) {
                            //请求已发出，服务器返回状态码不是2xx。
                            console.info(e.response.data);
                            console.info(e.response.status);
                            console.info(e.response.headers);
                        } else if (e.request) {
                            // 请求已发出，但没有收到响应
                            // e.request 在浏览器里是一个XMLHttpRequest实例，
                            // 在node中是一个http.ClientRequest实例
                            console.info(e.request);
                        } else {
                            //发送请求时异常，捕捉到错误
                            console.info("error", e.message);
                        }
                        console.info(e.config);
                    });
            }
        });
    };

    render() {
        const { uploading, fileList } = this.state;
        const { getFieldDecorator } = this.props.form;
        // const avaliablemembers = this.state.members.map((d, index) => (
        //     <Option value={d.value} key={index}>
        //         {d.name}
        //     </Option>
        // ));

        const formItemLayout = {
            labelCol: { span: 8 },
            wrapperCol: { span: 8 }
        };

        const tailFormItemLayout = {
            wrapperCol: {
                offset: 8,
                span: 8
            }
        };

        const props = {
            onRemove: file => {
                this.setState(state => {
                    const index = state.fileList.indexOf(file);
                    const newFileList = state.fileList.slice();
                    newFileList.splice(index, 1);
                    return {
                        fileList: newFileList
                    };
                });
            },
            beforeUpload: file => {
                this.setState(state => ({
                    fileList: [...state.fileList, file]
                }));
                return false;
            },
            fileList
        };

        return (
            <Form {...formItemLayout} onSubmit={this.handleSubmit}>
                {/* <Form.Item label="单位">
                    {getFieldDecorator("schoolId", {
                        rules: [
                            {
                                required: true,
                                message: "请选择一个学校"
                            }
                        ]
                    })(
                        <Select
                            style={{
                                width: "100%"
                            }}
                            size="large"
                            placeholder="选择学校"
                        >
                            {avaliablemembers}
                        </Select>
                    )}
                </Form.Item> */}

                <Form.Item label="选择文件">
                    {getFieldDecorator("message", {
                        rules: [
                            {
                                required: true,
                                message: "请上传文件"
                            }
                        ]
                    })(
                        <Upload {...props}>
                            {this.state.fileList.length === 0 ? (
                                <Button>
                                    <Icon type="upload" />
                                    选择文件
                              </Button>
                            ) : null}
                        </Upload>
                    )}
                </Form.Item>

                <Form.Item {...tailFormItemLayout}>
                    <Button href={inspectitemUploadTemplateUrl}>
                        <Icon type="download" />
                        下载模板
                  </Button>
                </Form.Item>

                <Form.Item {...tailFormItemLayout}>
                    <Button type="primary" htmlType="submit">
                        提交
                  </Button>
                </Form.Item>
            </Form>
        );
    }
}
const Inspectitemdeploy = Form.create()(inspectitemdeploy);


class inspectitemquery extends Component{
    constructor(props) {
        super(props);
        this.state = {
            //detailVisible: false,
            alertVisible: false, //提示
            confirmLoading: false,
            msg: "", //提交失败时的提示语
            tableLoading: true,
            data: [],
            filteredInfo: null,
            sortedInfo: null,
            isSearch: false,
            classNameArr: [],
            existCategory: [],
            searchData: [],
            members: [],
            pushCategory:{
                "1":"消防设施",
                "2":"食品卫生",
                "3":"后勤保障",
                "4":"校园周边",
                "5":"车辆交通",
                "6":"校舍建筑",
                "7":"体艺场地",
                "8":"特种设备",
                "9":"专用教室",
                "10":"三防设施",
                "11":"心理健康",
                "12":"其他",
                "30":"疫情防控",
            },
            filteredInfo2: null,
            sortedInfo2: null,

            detailVisible: false,
            detailExist: false,

            searchChartLoading: true,
            chartInspectSearchData: {}
        };

    }

    componentDidMount() {
        this.refreshData();
        const allCategory = [];
        
        getAllInspectItemCategoryApi().then(res => {
                res.data.forEach((item, index) => {
                    allCategory.push({
                    id: item.id,
                    category: item.category,
                });
            });
            this.setState({
                members: allCategory
            });
        })
    }

    refreshData() {
        this.setState({
            tableLoading: true
        });
        let searchData = []
        
        getInspectItemsByItemApi("")
        .then(res => {
            res.data.forEach((row, index) => {
                searchData.push({
                    key: index + 1,
                    category: row.category,
                    item: row.item,
                    content: row.content,
                    pushCategoryId: this.state.pushCategory[row.pushCategoryId],
                });
            });
            this.setState({
                isSearch: true,
                searchData: searchData,
                tableLoading: false,
                alertVisible: false,
            });
        })
        .catch((e) => {
            if (e.response) {
                //请求已发出，服务器返回状态码不是2xx。
                console.info(e.response.data)
                console.info(e.response.status)
                console.info(e.response.headers)
            } else if (e.request) {
                // 请求已发出，但没有收到响应
                // e.request 在浏览器里是一个XMLHttpRequest实例，
                // 在node中是一个http.ClientRequest实例
                console.info(e.request)
            } else {
                //发送请求时异常，捕捉到错误
                console.info('error', e.message)
            }
            console.info(e.config)
        });
    }

    searchSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            console.log('Received values of form: ', values);
            if (values.categoryId == undefined && values.item == undefined && 
                values.content == undefined && values.pushCategoryId == undefined ) {
                this.refreshData();
            } 
            else if(values.categoryId != undefined && values.categoryId != ""){
                this.setState({
                    tableLoading: true
                });
                
                let searchData = [];
                getInspectItemsByCategoryIdApi(values.categoryId)
                    .then(res => {
                        res.data.forEach((row, index) => {
                            searchData.push({
                                key: index + 1,
                                category: row.category,
                                item: row.item,
                                content: row.content,
                                pushCategoryId: this.state.pushCategory[row.pushCategoryId],
                            });
                        });
                        this.setState({
                            isSearch: true,
                            searchData: searchData,
                            tableLoading: false,
                            alertVisible: false,
                        });
                    })
                    .catch((e) => {
                        if (e.response) {
                            //请求已发出，服务器返回状态码不是2xx。
                            console.info(e.response.data)
                            console.info(e.response.status)
                            console.info(e.response.headers)
                        } else if (e.request) {
                            // 请求已发出，但没有收到响应
                            // e.request 在浏览器里是一个XMLHttpRequest实例，
                            // 在node中是一个http.ClientRequest实例
                            console.info(e.request)
                        } else {
                            //发送请求时异常，捕捉到错误
                            console.info('error', e.message)
                        }
                        console.info(e.config)
                    });
            }
            else if(values.item != undefined && values.item != "")
            {
                this.setState({
                    tableLoading: true
                });
                let searchData = [];
                getInspectItemsByItemApi(values.item)
                .then(res => {
                    res.data.forEach((row, index) => {
                        searchData.push({
                            key: index + 1,
                            category: row.category,
                            item: row.item,
                            content: row.content,
                            pushCategoryId: this.state.pushCategory[row.pushCategoryId],
                        });
                    });
                    this.setState({
                        isSearch: true,
                        searchData: searchData,
                        tableLoading: false,
                        alertVisible: false,
                    });
                })
                .catch((e) => {
                    if (e.response) {
                        //请求已发出，服务器返回状态码不是2xx。
                        console.info(e.response.data)
                        console.info(e.response.status)
                        console.info(e.response.headers)
                    } else if (e.request) {
                        // 请求已发出，但没有收到响应
                        // e.request 在浏览器里是一个XMLHttpRequest实例，
                        // 在node中是一个http.ClientRequest实例
                        console.info(e.request)
                    } else {
                        //发送请求时异常，捕捉到错误
                        console.info('error', e.message)
                    }
                    console.info(e.config)
                });
            }
            else if(values.content != undefined && values.content != "")
            {
                this.setState({
                    tableLoading: true
                });
                let searchData = [];
                getInspectItemsByContentApi(values.content)
                .then(res => {
                    res.data.forEach((row, index) => {
                        searchData.push({
                            key: index + 1,
                            category: row.category,
                            item: row.item,
                            content: row.content,
                            pushCategoryId: this.state.pushCategory[row.pushCategoryId],
                        });
                    });
                    this.setState({
                        isSearch: true,
                        searchData: searchData,
                        tableLoading: false,
                        alertVisible: false,
                    });
                })
                .catch((e) => {
                    if (e.response) {
                        //请求已发出，服务器返回状态码不是2xx。
                        console.info(e.response.data)
                        console.info(e.response.status)
                        console.info(e.response.headers)
                    } else if (e.request) {
                        // 请求已发出，但没有收到响应
                        // e.request 在浏览器里是一个XMLHttpRequest实例，
                        // 在node中是一个http.ClientRequest实例
                        console.info(e.request)
                    } else {
                        //发送请求时异常，捕捉到错误
                        console.info('error', e.message)
                    }
                    console.info(e.config)
                });
            }
            else if(values.pushCategoryId != undefined && values.pushCategoryId != "")
            {
                this.setState({
                    tableLoading: true
                });
                let searchData = [];
                getInspectItemsByPushCategoryIdApi(values.pushCategoryId)
                .then(res => {
                    res.data.forEach((row, index) => {
                        searchData.push({
                            key: index + 1,
                            category: row.category,
                            item: row.item,
                            content: row.content,
                            pushCategoryId: this.state.pushCategory[row.pushCategoryId],
                        });
                    });
                    this.setState({
                        isSearch: true,
                        searchData: searchData,
                        tableLoading: false,
                        alertVisible: false,
                    });
                })
                .catch((e) => {
                    if (e.response) {
                        //请求已发出，服务器返回状态码不是2xx。
                        console.info(e.response.data)
                        console.info(e.response.status)
                        console.info(e.response.headers)
                    } else if (e.request) {
                        // 请求已发出，但没有收到响应
                        // e.request 在浏览器里是一个XMLHttpRequest实例，
                        // 在node中是一个http.ClientRequest实例
                        console.info(e.request)
                    } else {
                        //发送请求时异常，捕捉到错误
                        console.info('error', e.message)
                    }
                    console.info(e.config)
                });
            }
        });
    }

    handleDetailDrawerCancel() {
        this.setState({
            detailVisible: false,
        })
    }

    //关闭 alert 的提示
    handleClose() {
        this.setState({ alertVisible: false });
    }

    clearAll = () => {
        this.setState({
            filteredInfo: null,
            sortedInfo: null,
        });

    }

    handleChange = (pagination, filters, sorter) => {
        //console.log('Various parameters', pagination, filters, sorter);
        this.setState({
            filteredInfo: filters,
            sortedInfo: sorter,
        });
    }

    handleSearch = (selectedKeys, confirm) => () => {
        confirm();
        // this.setState({
        //     searchText: selectedKeys[0],
        // });
    }

    handleSearchReset = clearFilters => () => {
        clearFilters();
        // this.setState({
        //     searchText: '',
        // });
    }

    clearAll2 = () => {
        this.setState({
            filteredInfo2: null,
            sortedInfo2: null,
        });

    }

    handleChange2 = (pagination, filters, sorter) => {
        //console.log('Various parameters', pagination, filters, sorter);
        this.setState({
            filteredInfo2: filters,
            sortedInfo2: sorter,
        });
    }

    handleSearch2 = (selectedKeys, confirm) => () => {
        confirm();
        // this.setState({
        //     // searchText2: selectedKeys[0],
        // });
    }

    handleSearchReset2 = clearFilters => () => {
        clearFilters();
        // this.setState({
        //     // searchText2: '',
        // });
    }

    onRef = (ref) => {
        this.child = ref
    }

    searchReset = () => {
        this.props.form.resetFields();
        this.setState({
            isSearch: false,
        })
    }

    fullScreenCancel() {
        this.setState({
            fullScreenVisible: false,
        })
    }


    render() {
        const allCategory = this.state.members.map((d, index) => (
            <Option value={d.id} key={index}>
                {d.category}
            </Option>
        ));
        let { sortedInfo, filteredInfo } = this.state;
        sortedInfo = sortedInfo || {};
        filteredInfo = filteredInfo || {};
        const columns = [{
                title: "序号",
                dataIndex: "key",
                key: "key",
            }, {
                title: "巡检类型",
                dataIndex: "category",
                key: "category",
            }, {
                title: "巡检项",
                dataIndex: "item",
                key: "item",
            }, {
                title: '巡检内容',
                dataIndex: 'content',
                key: 'content',
            }, {
                title: '推送类型',
                dataIndex: 'pushCategoryId',
                key: 'pushCategoryId',
            },
        ];

        const { getFieldDecorator, getFieldValue } = this.props.form;
        let { sortedInfo2, filteredInfo2 } = this.state;
        sortedInfo2 = sortedInfo2 || {};
        filteredInfo2 = filteredInfo2 || {};


        let keyWidth = undefined;
        let categoryWidth = undefined;
        let itemWidth = undefined;
        let contentWidth = undefined;
        let pushCategoryWidth = undefined;

        let winWidth;
        // 获取窗口宽度
        if (window.innerWidth)
            winWidth = window.innerWidth;
        else if ((document.body) && (document.body.clientWidth))
            winWidth = document.body.clientWidth;
        if (winWidth < 1500) {
            keyWidth = 60;
            categoryWidth = 100;
            itemWidth = 150;
            contentWidth = 500;
            pushCategoryWidth = 100;
        }

            const columnsSearch = [{
                title: "序号",
                dataIndex: "key",
                key: "key",
                width: keyWidth,
            }, {
                title: "巡检类型",
                dataIndex: "category",
                key: "category",
                width: categoryWidth,
            }, {
                title: "巡检项",
                dataIndex: "item",
                key: "item",
                width: itemWidth
            }, {
                title: '巡检内容',
                dataIndex: 'content',
                key: 'content',
                width: contentWidth,
            }, {
                title: '推送类型',
                dataIndex: 'pushCategoryId',
                key: 'pushCategoryId',
                width: pushCategoryWidth,
            },
        ];

        let labelCol = {
            sm: { span: 6 },
            xl: { span: 6 },
            xxl: { span: 5 },
        };

        let wrapperCol = {
            sm: { span: 18 },
            xl: { span: 18 },
            xxl: { span: 19 },
        };

        return (
            <div style={{ marginBottom: 16 }}>
                <Form
                    style={{
                        padding: '12px',
                        backgroundColor: '#fafafa',
                        borderRadius: 8,
                        marginBottom: 16,
                    }}
                    layout="inline"
                    onSubmit={this.searchSubmit}>
                    <Row>
                        <Col span={11}>
                            <FormItem
                                label="巡检类型"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("categoryId", {
                                    rules: [{
                                        required: false,
                                        message: "请选择巡检类型"
                                    }]
                                })(
                                    <Select
                                        style={{
                                            width: "100%"
                                        }}
                                        size="large"
                                        placeholder="选择巡检类型"
                                    >
                                        <Option value="">无</Option>
                                        {allCategory}
                                    </Select>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={11}>
                            <FormItem
                                label="巡检项"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("item", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <Input
                                        allowClear={true}
                                        style={{ width: '100%' }}
                                        placeholder="请输入巡检项"
                                    ></Input>
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={11}>
                            <FormItem
                                label="巡检内容"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("content", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <Input
                                        allowClear={true}
                                        style={{ width: '100%' }}
                                        placeholder="请输入巡检内容"
                                    ></Input>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={11}>
                            <FormItem
                                label="推送类型"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("pushCategoryId", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <Select
                                        allowClear={true}
                                        style={{ width: '100%' }}
                                        placeholder="请选择推送类型">
                                        <Option value="">无</Option>
                                        <Option value="1">消防设施</Option>
                                        <Option value="2">食品卫生</Option>
                                        <Option value="3">后勤保障</Option>
                                        <Option value="4">校园周边</Option>
                                        <Option value="5">车辆交通</Option>
                                        <Option value="6">校舍建筑</Option>
                                        <Option value="7">体艺场地</Option>
                                        <Option value="8">特种设备</Option>
                                        <Option value="9">专用教室</Option>
                                        <Option value="10">三防设施</Option>
                                        <Option value="11">心理健康</Option>
                                        <Option value="12">其他</Option>
                                        <Option value="30">疫情防控</Option>
                                    </Select>
                                )}
                            </FormItem>
                        </Col>
                        <FormItem
                            style={{ float: 'right' }}>
                            <Button type="primary" htmlType="submit">搜索</Button>
                            <Button style={{ marginLeft: 8 }} onClick={this.searchReset}>清空</Button>
                        </FormItem>
                    </Row>
                </Form>
                {this.state.isSearch ? (
                    <div>
                        <Table
                            dataSource={this.state.searchData}
                            columns={columnsSearch}
                            loading={this.state.tableLoading}
                            locale={{ emptyText: '暂无数据' }}
                            onChange={this.handleChange2}
                            rowClassName={(record, index) => index % 2 === 0 ? "rowOne" : "rowTwo"}
                            pagination={{  //分页
                                total: this.state.searchData.length, //数据总数量
                                defaultPageSize: 10, //默认显示几条一页
                                //pageSize: 10,
                                showTotal: function (total) {  //设置显示一共几条数据
                                    return '共 ' + total + ' 条数据';
                                },
                                showSizeChanger: true,
                                showQuickJumper: true,
                                pageSizeOptions: [5, 10, 20, 30]
                            }} />
                    </div>
                ) : (
                    <Table
                        dataSource={this.state.columnData}
                        columns={columns}
                        loading={this.state.tableLoading}
                        locale={{ emptyText: '暂无数据' }}
                        onChange={this.handleChange}

                        expandedRowRender={(record) => {
                            return (
                                <InspectConditionInnerTable
                                    //wrappedComponentRef={(inst) => this.teammateTableFormRef = inst}
                                    //ref="teammateTableRefresh"
                                    onRef={this.onRef}
                                    teamId={record.teamId}
                                    that={this} />)
                        }}
                        rowClassName={(record, index) => index % 2 === 0 ? "rowOne" : "rowTwo"}
                        pagination={{  //分页
                            total: this.state.data.length, //数据总数量
                            defaultPageSize: 10, //默认显示几条一页
                            //pageSize: 10,
                            showTotal: function (total) {  //设置显示一共几条数据
                                return '共 ' + total + ' 条数据';
                            },
                            showSizeChanger: true,
                            showQuickJumper: true,
                            pageSizeOptions: [5, 10, 20, 30]
                        }} />
                )}
            </div>
        )
    }
}
const Inspectitemquery = Form.create()(inspectitemquery);

// class publiclistdeploy extends Component {
//     constructor(props) {
//         super(props);
//         this.state = {
//             members: [],
//             schoolId: 0,
//             fileList: [],
//             uploading: false
//         };
//     }

//     componentDidMount() {
//         const avaliablemembers = [];
//         SchoolAllApi().then(res => {
//             res.data.forEach((item, index) => {
//                 //console.log("getAllUser", item);
//                 avaliablemembers.push({
//                     name: item.name,
//                     value: item.id,
//                     address: item.address
//                 });
//             });
//             this.setState({
//                 members: avaliablemembers
//             });
//         });
//     }

//     handleSubmit = e => {
//         e.preventDefault();
//         const { fileList } = this.state;
//         // console.log(fileList);
//         const formData = new FormData();
//         fileList.forEach(file => {
//             formData.append("upfile", file);
//         });
//         this.setState({
//             uploading: true
//         });
//         this.props.form.validateFields((err, values) => {
//             if (!err) {
//                 formData.append("schoolId", values.schoolId);
//                 formData.append("name", values.name);
//                 importPublicMemberListApi(formData)
//                     .then(res => {
//                         if (res.data === "success") {
//                             message.success("上传成功！");
//                             this.props.form.resetFields();
//                         } else {
//                             message.error(res.data);
//                         }
//                         this.setState({
//                             uploading: false,
//                             fileList: []
//                         });
//                     })
//                     .catch(e => {
//                         if (e.response) {
//                             //请求已发出，服务器返回状态码不是2xx。
//                             console.info(e.response.data);
//                             console.info(e.response.status);
//                             console.info(e.response.headers);
//                         } else if (e.request) {
//                             // 请求已发出，但没有收到响应
//                             // e.request 在浏览器里是一个XMLHttpRequest实例，
//                             // 在node中是一个http.ClientRequest实例
//                             console.info(e.request);
//                         } else {
//                             //发送请求时异常，捕捉到错误
//                             console.info("error", e.message);
//                         }
//                         console.info(e.config);
//                     });
//             }
//         });
//     };

//     render() {
//         const text = "该功能只添加教师的公共分组";
//         const { uploading, fileList } = this.state;
//         const { getFieldDecorator } = this.props.form;
//         const avaliablemembers = this.state.members.map((d, index) => (
//             <Option value={d.value} key={index}>
//                 {d.name}
//             </Option>
//         ));

//         const formItemLayout = {
//             labelCol: { span: 8 },
//             wrapperCol: { span: 8 }
//         };

//         const tailFormItemLayout = {
//             wrapperCol: {
//                 offset: 8,
//                 span: 8
//             }
//         };

//         const props = {
//             onRemove: file => {
//                 this.setState(state => {
//                     const index = state.fileList.indexOf(file);
//                     const newFileList = state.fileList.slice();
//                     newFileList.splice(index, 1);
//                     return {
//                         fileList: newFileList
//                     };
//                 });
//             },
//             beforeUpload: file => {
//                 this.setState(state => ({
//                     fileList: [...state.fileList, file]
//                 }));
//                 return false;
//             },
//             fileList
//         };

//         return (
//             <Form {...formItemLayout}>
//                 <Form.Item label="单位">
//                     {getFieldDecorator("schoolId", {
//                         rules: [
//                             {
//                                 required: true,
//                                 message: "请选择一个学校"
//                             }
//                         ]
//                     })(
//                         <Select
//                             style={{
//                                 width: "100%"
//                             }}
//                             size="large"
//                             placeholder="选择学校"
//                         >
//                             {avaliablemembers}
//                         </Select>
//                     )}
//                 </Form.Item>

//                 <Form.Item label="分组名称">
//                     {getFieldDecorator("name", {
//                         rules: [
//                             {
//                                 required: true,
//                                 message: "请输入分组名称"
//                             }
//                         ]
//                     })(
//                         <Input
//                             style={{
//                                 width: "100%"
//                             }}
//                             size="large"
//                             placeholder="输入分组名称"
//                         ></Input>
//                     )}
//                 </Form.Item>

//                 <Form.Item label="选择文件">
//                     {getFieldDecorator("message", {
//                         rules: [
//                             {
//                                 required: true,
//                                 message: "请上传文件"
//                             }
//                         ]
//                     })(
//                         <Upload {...props}>
//                             {this.state.fileList.length === 0 ? (
//                                 <Button>
//                                     <Icon type="upload" />
//                                     选择文件
//                               </Button>
//                             ) : null}
//                         </Upload>
//                     )}
//                 </Form.Item>

//                 <Form.Item {...tailFormItemLayout}>
//                     <Button href={memberUploadTemplateUrl}>
//                         <Icon type="download" />
//                         下载模板
//                   </Button>
//                 </Form.Item>

//                 <Form.Item {...tailFormItemLayout}>
//                     <Popconfirm
//                         placement="topLeft"
//                         title={text}
//                         onConfirm={this.handleSubmit}
//                         okText="Yes"
//                         cancelText="No"
//                     >
//                         <Button type="primary">提交</Button>
//                     </Popconfirm>
//                 </Form.Item>
//             </Form>
//         );
//     }
// }
// const Publiclistdeploy = Form.create()(publiclistdeploy);

class devicedeploy extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 0,
            tableData: [],
            tableloading: false,
            filteredInfo: null,
            sortedInfo: null,
            members: [],
            addDevice: false,
            confirmLoading: false,
            fileList: [],
            updateConfirmLoading: false,
            updateDevice: false,
            updateRecord: null,
        };
    }

    componentDidMount() {
        const avaliablemembers = [];
        SchoolAllApi().then(res => {
            res.data.forEach((item, index) => {
                //console.log("getAllUser", item);
                avaliablemembers.push({
                    name: item.name,
                    value: item.id,
                    address: item.address
                });
            });
            this.setState({
                members: avaliablemembers
            });
            console.log("学校")
        });
        this.refreshData();
    }

    refreshData() {
        this.setState({
            tableloading: true
        });

        let deviceTypeName = { "smoke": "烟感", "upanddown": "升降柱", "visit": "访客机", "facerecord": "人脸闸机", "camera": "摄像头" }
        getAllCallBackDeviceApi()
            .then(res => {
                let tableData = [];
                res.data.forEach((d, index) => {
                    tableData.push({
                        key: index + 1,
                        id: d.id,
                        devicetype: d.deviceType,
                        devicetypeName: deviceTypeName[d.deviceType],
                        department: d.department,
                        deviceId: d.deviceId,
                        deviceName: d.deviceName,
                        deviceAddress: d.deviceAddress,
                        departmentName: d.departmentName,
                        work: d.work == 0 ? "工作" : "离线"
                    })
                })
                //console.log(tableData, "!!!!!!!")
                this.setState({
                    tableData: tableData,
                    tableloading: false
                });
            })
            .catch(e => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data);
                    console.info(e.response.status);
                    console.info(e.response.headers);
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request);
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info("error", e.message);
                }
                console.info(e.config);
            });
    }

    searchSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => { 
            //console.log(values);
            if (values.deviceType == undefined && values.departmentName == undefined && values.deviceId == undefined
                && values.deviceName == undefined && values.deviceAddress == undefined && values.work == undefined) {
                message.error('请至少填写一项条件再进行搜索');
            } else { 
                this.setState({
                    tableLoading: true,
                    isSearch: true,
                });
                let tableData = [];
                let deviceTypeName = { "smoke": "烟感", "upanddown": "升降柱", "visit": "访客机", "facerecord": "人脸闸机", "camera": "摄像头" };
                getAllCallBackDeviceByConditionApi(values)
                    .then(res => {
                        //console.log(res.data);
                        res.data.forEach((item, index) => {
                            tableData.push({
                                key: index + 1,
                                id: item.id,
                                devicetype: item.deviceType,
                                devicetypeName: deviceTypeName[item.deviceType],
                                department: item.department,
                                deviceId: item.deviceId,
                                deviceName: item.deviceName,
                                deviceAddress: item.deviceAddress,
                                departmentName: item.departmentName,
                                work: item.work == 0 ? "工作" : "离线"
                            })
                        })
                        //console.log(tableData, "!!!!!!!")
                        this.setState({
                            tableData: tableData,
                            tableloading: false
                        });
                    })
                    .catch(e => {
                        if (e.response) {
                            //请求已发出，服务器返回状态码不是2xx。
                            console.info(e.response.data);
                            console.info(e.response.status);
                            console.info(e.response.headers);
                        } else if (e.request) {
                            // 请求已发出，但没有收到响应
                            // e.request 在浏览器里是一个XMLHttpRequest实例，
                            // 在node中是一个http.ClientRequest实例
                            console.info(e.request);
                        } else {
                            //发送请求时异常，捕捉到错误
                            console.info("error", e.message);
                        }
                        console.info(e.config);
                    });
            }

        })
    }

    searchReset = () => { 
        this.props.form.resetFields();
        this.refreshData();
    }

    getUploadFile = (fileList) => {
        this.setState({
            fileList: fileList
        })
    }

    deleteDevice(id, deviceId) {
        this.setState({
            tableLoading: true
        });
        deleteDeviceApi(id, deviceId)
            .then(res => {
                if (res.data == "success") {
                    message.success("删除成功！");
                    this.refreshData();
                } else {
                    this.setState({
                        msg: "删除失败！"
                    });
                }
                this.setState({
                    tableLoading: false
                });
            })
            .catch(e => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data);
                    console.info(e.response.status);
                    console.info(e.response.headers);
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request);
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info("error", e.message);
                }
                console.info(e.config);
            });
    }

    handleSubmit = (e) => {
        // e.preventDefault();
        this.setState({
            confirmLoading: true,
            tableloading: true
        });
        let val = this.refs.addDeviceForm;
        // const { fileList } = this.state;
        // console.log(fileList);
        val.validateFields((err, values) => {
            console.log(err, "!!!!!+++++")
            const formData = new FormData();
            this.state.fileList.forEach(file => {
                console.log(file, "svsdvsdv")
                formData.append("upfile", file);
            });
            if (!err) {
                console.log(formData.get("upfile"), "98798798987")
                formData.append("department", values.department);
                formData.append("devicetype", values.devicetype);
                formData.append("deviceId", values.deviceId === undefined ? '无' : values.deviceId);
                formData.append("deviceName", values.deviceName === undefined ? '无' : values.deviceName);
                formData.append("deviceAddress", values.deviceAddress === undefined ? '无' : values.deviceAddress);
                console.log(formData, "55556458");
                addDeviceApi(formData)
                    .then(res => {
                        if (res.data === "success") {
                            message.success("上传成功！");
                            this.handleCancel();
                            this.refreshData();
                        } else {
                            message.error(res.data);
                        }
                        this.setState({
                            confirmLoading: false,
                            fileList: [],
                        });
                    })
                    .catch(e => {
                        if (e.response) {
                            //请求已发出，服务器返回状态码不是2xx。
                            console.info(e.response.data);
                            console.info(e.response.status);
                            console.info(e.response.headers);
                        } else if (e.request) {
                            // 请求已发出，但没有收到响应
                            // e.request 在浏览器里是一个XMLHttpRequest实例，
                            // 在node中是一个http.ClientRequest实例
                            console.info(e.request);
                        } else {
                            //发送请求时异常，捕捉到错误
                            console.info("error", e.message);
                        }
                        console.info(e.config);
                        this.setState({
                            confirmLoading: false,
                            fileList: [],
                        });
                    });
            } else {
                this.setState({
                    confirmLoading: false,
                });
            }
        })
    };

    updateHandleSubmit = () => {
        this.setState({
            updateConfirmLoading: true,
            tableloading: true
        });
        let val = this.refs.updateDeviceForm;
        val.validateFields((err, values) => {
            console.log(err, "err"),
                console.log(values, "values")
            if (!err) {
                let id = this.state.updateRecord.id
                console.log("svsdvsdvsdv")
                updateDeviceApi(id, values)
                    .then(res => {
                        if (res.data === "success") {
                            message.success("上传成功！");
                            this.handleCancel();
                            this.refreshData();
                        } else {
                            message.error(res.data);
                        }
                        this.setState({
                            updateConfirmLoading: false,
                        });
                    })
                    .catch(e => {
                        if (e.response) {
                            //请求已发出，服务器返回状态码不是2xx。
                            console.info(e.response.data);
                            console.info(e.response.status);
                            console.info(e.response.headers);
                        } else if (e.request) {
                            // 请求已发出，但没有收到响应
                            // e.request 在浏览器里是一个XMLHttpRequest实例，
                            // 在node中是一个http.ClientRequest实例
                            console.info(e.request);
                        } else {
                            //发送请求时异常，捕捉到错误
                            console.info("error", e.message);
                        }
                        console.info(e.config);
                        this.setState({
                            updateConfirmLoading: false,
                        });
                    });
            } else {
                this.setState({
                    updateConfirmLoading: false,
                });
            }
        })
    }

    handleCancel() {
        this.setState({
            updateDevice: false,
            addDevice: false,
            tableloading: false
        });
    }

    handleClick = () => {
        this.setState({
            addDevice: true,
            tableloading: true
        });
    }

    showUpdateModal = (record) => {
        let updateRecord = record;
        console.log(record, "record")
        this.setState({
            updateDevice: true,
            updateRecord: updateRecord,
        });
    }

    render() {
        const { getFieldDecorator, getFieldValue } = this.props.form;

        let allDepartment = [];

        this.state.members.forEach((item, index) => {
            if(item.name != "") {
                allDepartment.push(item.name);
            }
        });

        // const avaliablemembers = this.state.members.map((d, index) => (
        //     <Option value={d.value} key={index}>
        //         {d.name}
        //     </Option>
        // ));

        let { sortedInfo, filteredInfo } = this.state;
        sortedInfo = sortedInfo || {};
        filteredInfo = filteredInfo || {};
        const roleColumns = [
            {
                title: "ID",
                dataIndex: "key",
                key: "id",
                width: "5%"
            },
            {
                title: "设备类型",
                dataIndex: "devicetypeName",
                key: "devicetype",
                width: "10%",
                filters: [{ text: '烟感', value: 'smoke' }, { text: '升降柱', value: 'upanddown' }, { text: '人脸闸机', value: 'face' }, { text: '访客机', value: 'visit' }, { text: '摄像头', value: 'camera' }],
                // filteredValue: filteredInfo.devicetype,
                onFilter: (value, record) => {
                    return record.devicetype === value
                },
            },
            {
                title: "单位",
                dataIndex: "departmentName",
                key: "departmentName",
                width: "15%"
            },
            {
                title: "设备号",
                dataIndex: "deviceId",
                key: "deviceId",
                width: "20%"
            },
            {
                title: "设备名称",
                dataIndex: "deviceName",
                key: "deviceName",
                width: "15%"
            },
            {
                title: "设备地址",
                dataIndex: "deviceAddress",
                key: "deviceAddress",
                width: "15%"
            },
            {
                title: "工作情况",
                dataIndex: "work",
                key: "work",
                width: "10%"
            },
            {
                title: "操作详情",
                key: "action",
                width: "10%",
                render: (text, record) => (
                    <span>
                        <a href="javascript:;" onClick={() => this.showUpdateModal(record)}>
                            Manage
                      </a>
                        <Divider type="vertical" />
                        <Popconfirm
                            title="Are you sure delete this role?"
                            onConfirm={() => this.deleteDevice(record.id, record.deviceId)}
                            okText="Yes"
                            cancelText="No"
                        >
                            <a href="javascript:;">Delete</a>
                        </Popconfirm>
                    </span>
                )
            }
        ];

        let labelCol = {
            sm: { span: 6 },
            xl: { span: 6 },
            xxl: { span: 5 },
        };

        let wrapperCol = {
            sm: { span: 18 },
            xl: { span: 18 },
            xxl: { span: 19 },
        };

        return (
            <div>
                <Form
                    style={{
                        padding: '12px',
                        backgroundColor: '#fafafa',
                        borderRadius: 8,
                        marginBottom: 16
                    }}
                    layout="inline"
                    onSubmit={this.searchSubmit}>
                    <Row>
                        <Col span={8}>
                            <Form.Item
                                label="设备类型"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("deviceType", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <Select style={{ width: '100%' }} placeholder="选择设备类型">
                                        <Option value="smoke">烟感</Option>
                                        <Option value="upanddown">升降柱</Option>
                                        <Option value="facerecord">人脸闸机</Option>
                                        <Option value="visit">访客机</Option>
                                        <Option value="camera">摄像头</Option>
                                    </Select>
                                )}
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item
                                label="单位"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("departmentName", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <AutoComplete
                                        allowClear={true}
                                        style={{ width: '100%' }}
                                        dataSource={allDepartment}
                                        placeholder="选择设备所属单位"
                                        filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
                                    />
                                )}
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item
                                label="设备编号"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("deviceId", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <Input
                                        allowClear={true}
                                        style={{ width: '100%' }}
                                        placeholder="请输入设备编号"
                                    ></Input>
                                )}
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={8}>
                            <Form.Item
                                label="设备名称"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("deviceName", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <Input
                                        allowClear={true}
                                        style={{ width: '100%' }}
                                        placeholder="请输入设备名称"
                                    ></Input>
                                )}
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item
                                label="设备地址"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("deviceAddress", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <Input
                                        allowClear={true}
                                        style={{ width: '100%' }}
                                        placeholder="请输入设备地址"
                                    ></Input>
                                )}
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item
                                label="工作情况"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("work", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <Select
                                        style={{ width: '100%' }}
                                        placeholder="请选择工作情况">
                                        <Option value={0}>工作</Option>
                                        <Option value={1}>离线</Option>
                                    </Select>
                                )}
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row>
                        <Form.Item
                            style={{ float: 'right' }}>
                            <Button type="primary" htmlType="submit">搜索</Button>
                            <Button style={{ marginLeft: 8 }} onClick={this.searchReset}>清空</Button>
                        </Form.Item>
                    </Row>
                </Form>
                <div style={{ marginBottom: "16px" }}>
                    <Button
                        type="primary"
                        onClick={() => this.handleClick()}
                    >
                        导入对应设备单位
                    </Button>
                </div>

                <Modal
                    destroyOnClose
                    title={"设备导入"}
                    width={1000}
                    visible={this.state.addDevice}
                    onCancel={() => this.handleCancel()}
                    closable
                    footer={[
                        <Button
                            key="submit"
                            type="primary"
                            size="large"
                            loading={this.state.confirmLoading}
                            onClick={this.handleSubmit.bind(this)}
                        >
                            提交
                        </Button>
                    ]} >
                    <AddDeviceForm ref="addDeviceForm" members={this.state.members} getUploadFile={this.getUploadFile} />
                </Modal>

                <Table
                    style={{ fontSize: "8" }}
                    bordered={false}
                    columns={roleColumns}
                    dataSource={this.state.tableData}
                    pagination={false}
                    loading={this.state.tableloading}
                    locale={{ emptyText: "暂无数据" }}
                    rowClassName={(record, index) => {
                        let className = "";
                        index % 2 === 0
                            ? (className = "mytr rowOne")
                            : (className = "mytr rowTwo");
                        record.identity === this.state.mouseEnterRow
                            ? (className += " mouseEnterRow")
                            : (className += "");
                        return className;
                    }}
                    onRow={record => {
                        return {
                            onMouseEnter: event => {
                                this.setState({
                                    mouseEnterRow: record.identity
                                });
                            }, // 鼠标移入行
                            onMouseLeave: event => {
                                this.setState({
                                    mouseEnterRow: ""
                                });
                            }
                        };
                    }}
                    pagination={{
                        //分页
                        total: this.state.tableData.length, //数据总数量
                        defaultPageSize: 10, //默认显示几条一页
                        //pageSize: 10,
                        showTotal: function (total) {
                            //设置显示一共几条数据
                            return "共 " + total + " 条数据";
                        },
                        showSizeChanger: true,
                        showQuickJumper: true,
                        pageSizeOptions: [5, 10, 20, 30]
                    }}
                />

                <Modal
                    destroyOnClose
                    title={"设备信息修改"}
                    width={1000}
                    visible={this.state.updateDevice}
                    onCancel={() => this.handleCancel()}
                    closable
                    footer={[
                        <Button
                            key="submit"
                            type="primary"
                            size="large"
                            loading={this.state.updateConfirmLoading}
                            onClick={() => this.updateHandleSubmit()
                            }
                        >
                            提交
                        </Button>
                    ]} >
                    <UpdateDeviceForm ref="updateDeviceForm" members={this.state.members} record={this.state.updateRecord} />
                </Modal>
            </div>
        );
    }
}

const Devicedeploy = Form.create()(devicedeploy);

class addDeviceForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            members: props.members == undefined ? null : props.members,
            fileList: [],
            devicetype: ""
        };
    }

    ChangeDeviceType = (value) => {
        this.setState({
            devicetype: value,
            fileList: [],
        }, () => {
            this.props.getUploadFile(this.state.fileList)
        })
    }

    getUploadFile = () => {
        console.log(this.state.fileList, "65464654654465")
        this.props.getUploadFile(this.state.fileList)
    }

    render() {
        const { uploading, fileList } = this.state;
        const { getFieldDecorator } = this.props.form;
        const avaliablemembers = this.state.members.map((d, index) => (
            <Option value={d.value} key={index}>
                {d.name}
            </Option>
        ));

        const formItemLayout = {
            labelCol: { span: 4 },
            wrapperCol: { span: 15 }
        };

        const tailFormItemLayout = {
            wrapperCol: {
                offset: 4,
                span: 4
            }
        };

        const props = {
            onRemove: file => {
                this.setState(state => {
                    console.log(file, "file")
                    const index = state.fileList.indexOf(file);
                    const newFileList = state.fileList.slice();
                    newFileList.splice(index, 1);
                    return {
                        fileList: newFileList
                    };
                }, () => {
                    console.log("beforeUpload")
                    this.getUploadFile();
                });
            },
            beforeUpload: file => {
                console.log(file, "file")
                this.setState(state => ({
                    fileList: [...state.fileList, file]
                }), () => {
                    console.log("beforeUpload")
                    this.getUploadFile();
                });
                return false;
            },
            fileList
        };

        return (
            <Form {...formItemLayout}>
                <Form.Item label="设备类型">
                    {getFieldDecorator("devicetype", {
                        rules: [
                            {
                                required: true,
                                message: "选择类型"
                            }
                        ]
                    })(
                        <Select style={{ width: 250 }} size="large" placeholder="选择设备类型" onChange={(value) => this.ChangeDeviceType(value)}>
                            <Option value="smoke">烟感</Option>
                            <Option value="upanddown">升降柱</Option>
                            <Option value="facerecord">人脸闸机</Option>
                            <Option value="visit">访客机</Option>
                        </Select>
                    )}
                </Form.Item>

                <Form.Item label="设备ID">
                    {getFieldDecorator("deviceId", {
                        rules: [
                            {
                                required: this.state.devicetype === "smoke" ? false : true,
                                message: "请填写设备ID"
                            }
                        ]
                    })(
                        <Input
                            size="large"
                            prefix={
                                <IconFont
                                    type="icon-jiaoyuju"
                                    style={{ color: "rgba(0,0,0,.25)" }}
                                />
                            }
                            placeholder="设备ID"
                            disabled={this.state.devicetype === "smoke"}
                        />
                    )}
                </Form.Item>
                <Form.Item label="设备名称">
                    {getFieldDecorator("deviceName", {
                        rules: [
                            {
                                required: this.state.devicetype === "smoke" ? false : true,
                                message: "请填写设备名称"
                            }
                        ]
                    })(
                        <Input
                            size="large"
                            prefix={
                                <IconFont
                                    type="icon-jiaoyuju"
                                    style={{ color: "rgba(0,0,0,.25)" }}
                                />
                            }
                            placeholder="设备名称"
                            disabled={this.state.devicetype === "smoke"}
                        />
                    )}
                </Form.Item>
                <Form.Item label="设备地址" >
                    {getFieldDecorator("deviceAddress", {
                        rules: [
                            {
                                required: this.state.devicetype === "smoke" ? false : true,
                                message: "请填写设备地址"
                            }
                        ]
                    })(
                        <Input
                            size="large"
                            prefix={
                                <IconFont
                                    type="icon-jiaoyuju"
                                    style={{ color: "rgba(0,0,0,.25)" }}
                                />
                            }
                            placeholder="设备地址"
                            disabled={this.state.devicetype === "smoke"}
                        />
                    )}
                </Form.Item>
                <Form.Item label="设备所属单位" >
                    {getFieldDecorator("department", {
                        rules: [
                            {
                                required: true,
                                message: "请选择设备所属单位"
                            }
                        ]
                    })(
                        <Select
                            style={{ width: 250 }}
                            size="large"
                            placeholder="选择设备所属单位">
                            {avaliablemembers}
                        </Select>
                    )}
                </Form.Item>

                <Form.Item label="选择文件" >
                    {getFieldDecorator("message", {
                        rules: [
                            {
                                required: this.state.devicetype === "smoke" ? true : false,
                                message: "请上传文件"
                            }
                        ]
                    })(
                        <Upload {...props} disabled={this.state.devicetype !== "smoke"}>
                            {this.state.fileList.length === 0 ? (
                                <Button>
                                    <Icon type="upload" />
                                    选择文件
                                </Button>
                            ) : null}
                        </Upload>
                    )}
                </Form.Item>

                <Form.Item {...tailFormItemLayout}>
                    <Button href={inspectitemUploadTemplateUrl}>
                        <Icon type="download" />
                        下载模板
                  </Button>
                </Form.Item>
            </Form>
        );
    }
}
const AddDeviceForm = Form.create()(addDeviceForm);

class updateDeviceForm extends Component {
    constructor(props) {
        super(props)
        this.state = {
            members: props.members == undefined ? null : props.members,
            devicetype: props.record.devicetype == undefined ? null : props.record.devicetype,
            deviceId: props.record.deviceId == undefined ? null : props.record.deviceId,
            deviceName: props.record.deviceName == undefined ? null : props.record.deviceName,
            deviceAddress: props.record.deviceAddress == undefined ? null : props.record.deviceAddress,
            department: props.record.department == undefined ? null : props.record.department,
        }
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const avaliablemembers = this.state.members.map((d, index) => (
            <Option value={d.value} key={index}>
                {d.name}
            </Option>
        ));

        const formItemLayout = {
            labelCol: { span: 4 },
            wrapperCol: { span: 15 }
        };

        return (
            <Form {...formItemLayout}>
                <Form.Item label="设备类型">
                    {getFieldDecorator("devicetype", {
                        initialValue: this.state.devicetype,
                        rules: [
                            {
                                required: true,
                                message: "选择类型"
                            }
                        ]
                    })(
                        <Select style={{ width: 250 }} size="large" placeholder="选择设备类型" onChange={(value) => this.ChangeDeviceType(value)}>
                            <Option value="smoke">烟感</Option>
                            <Option value="upanddown">升降柱</Option>
                            <Option value="facerecord">人脸闸机</Option>
                            <Option value="visit">访客机</Option>
                        </Select>
                    )}
                </Form.Item>

                <Form.Item label="设备ID">
                    {getFieldDecorator("deviceId", {
                        initialValue: this.state.deviceId,
                        rules: [
                            {
                                required: true,
                                message: "请填写设备ID"
                            }
                        ]
                    })(
                        <Input
                            size="large"
                            prefix={
                                <IconFont
                                    type="icon-jiaoyuju"
                                    style={{ color: "rgba(0,0,0,.25)" }}
                                />
                            }
                            placeholder="设备ID"
                            disabled={false}
                        />
                    )}
                </Form.Item>
                <Form.Item label="设备名称">
                    {getFieldDecorator("deviceName", {
                        initialValue: this.state.deviceName,
                        rules: [
                            {
                                required: true,
                                message: "请填写设备名称"
                            }
                        ]
                    })(
                        <Input
                            size="large"
                            prefix={
                                <IconFont
                                    type="icon-jiaoyuju"
                                    style={{ color: "rgba(0,0,0,.25)" }}
                                />
                            }
                            placeholder="设备名称"
                            disabled={false}
                        />
                    )}
                </Form.Item>
                <Form.Item label="设备地址" >
                    {getFieldDecorator("deviceAddress", {
                        initialValue: this.state.deviceAddress,
                        rules: [
                            {
                                required: true,
                                message: "请填写设备地址"
                            }
                        ]
                    })(
                        <Input
                            size="large"
                            prefix={
                                <IconFont
                                    type="icon-jiaoyuju"
                                    style={{ color: "rgba(0,0,0,.25)" }}
                                />
                            }
                            placeholder="设备地址"
                            disabled={false}
                        />
                    )}
                </Form.Item>
                <Form.Item label="设备所属单位" >
                    {getFieldDecorator("department", {
                        initialValue: this.state.department == 0 ? undefined : this.state.department,
                        rules: [
                            {
                                required: true,
                                message: "请选择设备所属单位"
                            }
                        ]
                    })(
                        <Select
                            style={{ width: 250 }}
                            size="large"
                            placeholder="选择设备所属单位">
                            {avaliablemembers}
                        </Select>
                    )}
                </Form.Item>
            </Form>
        )
    }
}
const UpdateDeviceForm = Form.create()(updateDeviceForm);

class publicuserdeploy extends Component {
    constructor(props) {
        super(props);
        this.state = {
            members: [],
            schoolId: 0,
            fileList: [],
            uploading: false,

        }
    }

    componentDidMount() {
        const avaliablemembers = [];
        SchoolAllApi()
            .then((res) => {
                res.data.forEach((item, index) => {
                    //console.log("getAllUser", item);
                    avaliablemembers.push({
                        name: item.name,
                        value: item.id,
                        address: item.address
                    });
                });
                this.setState({
                    members: avaliablemembers
                })
            })

    }

    handleSubmit = e => {
        e.preventDefault();
        const { fileList } = this.state;
        // console.log(fileList);
        const formData = new FormData();
        fileList.forEach((file) => {
            formData.append('upfile', file);
        });
        this.setState({
            uploading: true,
        });
        this.props.form.validateFields((err, values) => {
            if (!err) {
                formData.append('schoolId', values.schoolId);
                console.log(formData.get("schoolId"));
                addUserBySchoolIdApi(formData)
                    .then(res => {
                        if (res.data === "success") {
                            message.success("上传成功！");
                            this.props.form.resetFields();
                        } else {
                            message.error(res.data);
                        }
                        this.setState({
                            uploading: false,
                            fileList: [],
                        });
                    })
                    .catch((e) => {
                        if (e.response) {
                            //请求已发出，服务器返回状态码不是2xx。
                            console.info(e.response.data)
                            console.info(e.response.status)
                            console.info(e.response.headers)
                        } else if (e.request) {
                            // 请求已发出，但没有收到响应
                            // e.request 在浏览器里是一个XMLHttpRequest实例，
                            // 在node中是一个http.ClientRequest实例
                            console.info(e.request)
                        } else {
                            //发送请求时异常，捕捉到错误
                            console.info('error', e.message);
                        }
                        console.info(e.config)
                    });
            }
        });
    };

    render() {
        const { uploading, fileList } = this.state;
        const { getFieldDecorator } = this.props.form;
        const avaliablemembers = this.state.members.map((d, index) =>
            <Option value={d.value} key={index}>
                {d.name}
            </Option>);

        const formItemLayout = {
            labelCol: { span: 8 },
            wrapperCol: { span: 8 },
        };

        const tailFormItemLayout = {
            wrapperCol: {
                offset: 8,
                span: 8
            },
        };

        const props = {
            onRemove: (file) => {
                this.setState((state) => {
                    const index = state.fileList.indexOf(file);
                    const newFileList = state.fileList.slice();
                    newFileList.splice(index, 1);
                    return {
                        fileList: newFileList,
                    };
                });
            },
            beforeUpload: (file) => {
                this.setState(state => ({
                    fileList: [...state.fileList, file],
                }));
                return false;
            },
            fileList,
        };

        return (
            <Form {...formItemLayout} onSubmit={this.handleSubmit}>
                <Form.Item label="单位">
                    {getFieldDecorator('schoolId', {
                        rules: [
                            {
                                required: true,
                                message: '请选择一个学校',
                            },
                        ],
                    })(<Select
                        style={{
                            width: '100%'
                        }}
                        size="large"
                        placeholder="选择学校">
                        {avaliablemembers}
                    </Select>)}
                </Form.Item>

                <Form.Item label="选择文件">
                    {getFieldDecorator('message', {
                        rules: [
                            {
                                required: true,
                                message: '请上传文件',
                            },
                        ],
                    })(
                        <Upload {...props}>
                            {
                                this.state.fileList.length === 0 ?
                                    (
                                        <Button >
                                            <Icon type="upload" />选择文件
                                        </Button>
                                    ) :
                                    (
                                        null
                                    )
                            }
                        </Upload>
                    )}
                </Form.Item>

                <Form.Item {...tailFormItemLayout}>
                    <Button href={userUploadTemplateUrl}  ><Icon type="download" />下载模板</Button>
                </Form.Item>

                <Form.Item {...tailFormItemLayout}>
                    <Button type="primary" htmlType="submit">
                        提交，
                    </Button>
                </Form.Item>
            </Form>

        )
    }
}
const Publicuserdeploy = Form.create()(publicuserdeploy);

class useradjust extends Component {
    constructor(props) {
        super(props);
        this.state = {
            updateUserVisible: false, //控制调整用户信息模态框显示隐藏
            confirmLoading: false,
            alertVisible: false, //提示错误信息
            msg: "", //提交失败时的提示语
            // searchText: '',
            tableLoading: true,
            allDepartment: [],
            identityFilter: [],
            departmentFilter: [],
            columnData: [],
            filteredInfo: null,
            sortedInfo: null,
            pagination: null
        };
    }

    componentDidMount() {
        this.refreshData();
    }

    refreshData() {
        this.setState({
            tableLoading: true
        });
        this.getData(1, 10);
            let departmentFilter = [];
            let allDepartment = [];
            getUserAdjustSchool()
            .then((res) => {
                res.data.forEach((item) => {
                    allDepartment.push({
                        value: item.id,
                        text: item.name
                    });
                    departmentFilter.push({
                        value: item.name,
                        text: item.name
                    });
                });
                this.setState({
                    departmentFilter: departmentFilter,
                    allDepartment : allDepartment
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

            let identityFilter = [];
            getUserIdentity()
            .then((res) => {
                res.data.forEach((item) => {
                    identityFilter.push({
                        value: item.identity,
                        text: item.identity
                    });
                });
                this.setState({
                    identityFilter: identityFilter
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }

    updateHandleClick(id, username, department, departmentId, identity) {
        this.setState({
            modalTitle: "调整用户信息",
            id: id,
            department: department,
            departmentId: departmentId,
            preDepartmentId: departmentId,
            preidentity: identity
        });
        this.setState({
            updateUserVisible: true,
            username: username
        });
    }

    //关闭模态框
    handleCancel(modal) {
        this.setState({
            alertVisible: false
        });
        let val = this.refs.updateUserFormValue;
        val.resetFields();
        this.setState({
            updateUserVisible: false
        });
    }

    handleSearch = (selectedKeys, confirm) => () => {
        confirm();
        // this.setState({ searchText: selectedKeys[0] });
    }
    

    handleReset = clearFilters => () => {
        clearFilters();
        // this.setState({ searchText: '' });
    }

    handleChange = (pagination, filters, sorter) => {
        console.log("pagination1", pagination)
        this.getData(pagination.current, pagination.pageSize, filters.name, filters.department, filters.identity)
        this.setState({
            filteredInfo: filters,
            sortedInfo: sorter,
            pagination: pagination
        });
        console.log("pagination2", this.state.pagination)
    }

    getData(current, pageSize, name, department, identity) {
        this.setState({
            tableLoading: true
        });
        let columnData = [];
        allAdjustUserApi(current, pageSize, name, department, identity)
            .then((res) => {
                console.log("数据", res)
                res.data.pageData.forEach((item, index) => {
                    columnData.push({
                        key: index + 1,
                        id : item.id,
                        username: item.username,
                        name: item.realName,
                        phone: item.phone,
                        identity: item.identity,
                        department: item.department,
                        departmentId: item.departmentId
                    });
                });

                this.setState({
                    columnData: columnData,
                    tableLoading: false,
                    total: res.data.total
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }

    //调整员工信息 点击提交按钮后的操作
    updateUserHandleClick(id, username, preidentity) {
        this.setState({
            confirmLoading: true
        });
        let val = this.refs.updateUserFormValue;
        val.validateFields((err, values) => {
            updateAdjustUser(id, username, preidentity, values)
                    .then((res) => {
                        if (res.data == "success") {
                            this.setState({
                                updateUserVisible: false,
                                confirmLoading: false
                            });
                            this.getData(this.state.pagination.current, this.state.pagination.pageSize, this.state.filteredInfo.name, this.state.filteredInfo.department, this.state.filteredInfo.identity)
                            message.success("更新成功!");
                            val.resetFields();
                        } else if (res.data == "fail") {
                            this.setState({
                                alertVisible: true,
                                updateUserVisible: true,
                                confirmLoading: false,
                                msg: "修改失败,请检查信息或稍后再试!"
                            });
                        }
                    })
                    .catch((e) => {
                        if (e.response) {
                            //请求已发出，服务器返回状态码不是2xx。
                            console.info(e.response.data)
                            console.info(e.response.status)
                            console.info(e.response.headers)
                        } else if (e.request) {
                            // 请求已发出，但没有收到响应
                            // e.request 在浏览器里是一个XMLHttpRequest实例，
                            // 在node中是一个http.ClientRequest实例
                            console.info(e.request)
                        } else {
                            //发送请求时异常，捕捉到错误
                            console.info('error', e.message)
                        }
                        console.info(e.config)
                    });

        });
    }

    //关闭 错误的提示
    handleClose() {
        this.setState({ alertVisible: false });
    }

    handleDelete(username) {
        deleteUserApi(username)
            .then((res) => {
                if (res.data == "success") {
                    message.success("删除成功!");
                    this.refreshData();
                }else if(res.data == 'delete_fail'){
                    message.error('该用户已加入巡检计划,不可以删除，如要删除，请先在班组设置里删除该用户!');
                } else {
                    message.error('删除失败,请稍后再试!');
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }

    render() {
        let { sortedInfo, filteredInfo } = this.state;
        sortedInfo = sortedInfo || {};
        filteredInfo = filteredInfo || {};
        
        const userColumns = [
            {
                title: "序号",
                dataIndex: "key",
                key: "key"
            },
            {
                title: "用户名",
                dataIndex: "username",
                key: "username"
            },
            {
                title: "姓名",
                dataIndex: "name",
                key: "name",
                filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                    <div className="custom-filter-dropdown">
                        <Input
                            ref={ele => this.searchInput = ele}
                            value={selectedKeys[0]}
                            onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                            onPressEnter={this.handleSearch(selectedKeys, confirm)}
                        />
                        <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                        <Button onClick={this.handleReset(clearFilters)}>重置</Button>
                    </div>
                ),
                filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
                onFilterDropdownVisibleChange: (visible) => {
                    if (visible) {
                        setTimeout(() => {
                            this.searchInput.focus();
                        });
                    }
                }
            },
            {
                title: "联系电话",
                dataIndex: "phone",
                key: "phone"
            },
            {
                title: "用户类型",
                dataIndex: "identity",
                key: "identity",
                filters: this.state.identityFilter,
                filterIcon: filtered => <Icon type="filter" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />
            },
            {
                title: "学校",
                dataIndex: "department",
                key: "department",
                filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                    <div className="custom-filter-dropdown">
                        <Input
                            ref={ele => this.searchInput = ele}
                            value={selectedKeys[0]}
                            onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                            onPressEnter={this.handleSearch(selectedKeys, confirm)}
                        />
                        <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                        <Button onClick={this.handleReset(clearFilters)}>重置</Button>
                    </div>
                ),
                filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
                onFilterDropdownVisibleChange: (visible) => {
                    if (visible) {
                        setTimeout(() => {
                            this.searchInput.focus();
                        });
                    }
                }
            },
            {
                title: "操作详情",
                dataIndex: "action",
                render: (text, record) => (
                    <span>
                        <a href="javascript:;" onClick={this.updateHandleClick.bind(this, record.id, record.username, record.department, record.departmentId, record.identity)}>调整</a>
                        <Divider type="vertical" />
                        <Popconfirm title="确定删除？" okText="确定" cancelText="取消"
                            onConfirm={() => this.handleDelete(record.username)}>
                            <a href="#">删除</a>
                        </Popconfirm>
                    </span>
                )
            }
        ];
        return (
            <div>
                <div style={{ marginBottom: 16 }}>
                    <Modal
                        title={this.state.modalTitle}
                        visible={this.state.updateUserVisible}
                        onCancel={this.handleCancel.bind(this)}
                        closable
                        footer={[
                            <Button key="submit" type="primary" size="large"
                                loading={this.state.confirmLoading}
                                onClick={this.updateUserHandleClick.bind(this, this.state.id, this.state.username, this.state.preidentity)}>提交</Button>
                        ]}
                    >
                        {
                            (<UpdateUserForm ref="updateUserFormValue" department={this.state.department} departmentId={this.state.departmentId} allDepartment={this.state.allDepartment} />)
                        }
                        {
                            this.state.alertVisible ?
                                (
                                    <Alert message={this.state.msg} type="error" closable afterClose={this.handleClose.bind(this)} />
                                ) : null
                        }
                    </Modal>
                </div>
                <Table
                ref="table"
                    dataSource={this.state.columnData}
                    columns={userColumns}
                    loading={this.state.tableLoading}
                    locale={{ emptyText: '暂无数据' }}
                    onChange={this.handleChange}
                    rowClassName={(record, index) => index % 2 === 0 ? "rowOne" : "rowTwo"}
                    pagination={{  //分页
                        total: this.state.total,
                        defaultPageSize: 10, //默认显示几条一页
                        //pageSize: 10,
                        showTotal: total => '共'+ total +'条',
                        showSizeChanger: true,
                        showQuickJumper: true,
                        pageSizeOptions: [5, 10, 30, 100],
                 
                    }} />
            </div>
        );
    }
}

const Option = Select.Option;
class updateUserForm extends Component {
    constructor(props) {
        super(props);
            this.state = {
                allDepartment: props.allDepartment,
                currentDepartment: props.department,
                currentDepartmentId: props.departmentId
            }
    }

    componentWillReceiveProps(props) {
        this.setState({
            currentDepartment: props.department,
            currentDepartmentId: props.departmentId
        });

    }

    componentDidMount() {
    }


    render() {
        const { getFieldDecorator } = this.props.form;

        let currentDepartmentId = '';
        for (let i = 0; i < this.state.allDepartment.length; i++) {
            if (this.state.allDepartment[i].text == this.state.currentDepartment) {
                currentDepartmentId = this.state.allDepartment[i].value
                break;
            }
        }
        //console.log(this.state);
        const formItemLayout = {
            labelCol: { span: 4 },
            wrapperCol: { span: 16 },
        };

        const onSearchListedDepartment =(val, options) => {
            return options.props.children.indexOf(val) >= 0 
        }

        return (
            <Form>
                <div>
                    <Form.Item
                        label='学校'
                        {...formItemLayout}>
                        {getFieldDecorator("department", {
                            initialValue: currentDepartmentId,
                            rules: [{
                                required: true,
                                message: '请选择修改后的学校！',
                            }]
                        })(
                            <Select id="select" size="large" placeholder="请选择学校" showSearch filterOption={onSearchListedDepartment} showArrow>
                                {this.state.allDepartment.map((d, index) => <Option value={d.value} key={index}>{d.text}</Option>)}
                            </Select>
                        )}
                    </Form.Item>
                </div>
            </Form>
        );
    }
}
const UpdateUserForm = Form.create()(updateUserForm);

export default Permission;

class blueteethDeviceManagerTotal extends Component {
    constructor(props) {
        super(props);

        this.state = {
            addVisible: false,
            alertVisible: false,
            confirmLoading: false,
            msg: "", //提交失败时的提示语
            // searchText: '',
            tableLoading: true,
            data: [],
            filteredInfo: null,
            sortedInfo: null,
            nowMajor: undefined,
            usedFilter: [{
                text: '使用中',
                value: 1
            },
            {
                text: '备用',
                value: 0
            }],
            members:[]
        }
    }

    componentDidMount() {
        const avaliablemembers = [];
        SchoolAllApi().then(res => {
            res.data.forEach((item, index) => {
                //console.log("getAllUser", item);
                avaliablemembers.push({
                    name: item.name,
                    value: item.id,
                    address: item.address
                });
            });
            this.setState({
                members: avaliablemembers
            });
        });
        this.refreshData();
    }

    refreshData() {
        this.setState({
            tableLoading: true
        });
        let columnData = [];
        getAllBlueTeethDeviceApi()
            .then((res) => {
                res.data.forEach((item, index) => {
                    // console.log("item.macAddress", item.macAddress.split(':').legnth);
                    if (item.macAddress.split(':').length == 3) {
                        let macAddressId = (item.macAddress.split(':'))[1];
                        columnData.push({
                            key: index + 1,
                            id: item.id,
                            macAddress: item.macAddress,
                            macAddressId: macAddressId,
                            devicePower: item.devicePower,
                            createTime: item.createTime,
                            category: item.category,
                            deviceName: item.deviceName,
                            validTime: item.validTime,
                            used: item.used,
                            type: item.type,
                            departmentName: item.departmentName
                        });
                    } else {
                        columnData.push({
                            key: index + 1,
                            id: item.id,
                            macAddress: item.macAddress,
                            macAddressId: item.macAddress,
                            devicePower: item.devicePower,
                            createTime: item.createTime,
                            category: item.category,
                            deviceName: item.deviceName,
                            validTime: item.validTime,
                            used: item.used,
                            type: item.type,
                            departmentName: item.departmentName
                        });
                    }
                });

                this.setState({
                    columnData: columnData,
                    tableLoading: false
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }

    searchSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => { 
            //console.log(values);
            if (values.type == undefined && values.departmentName == undefined && values.macAddressId == undefined)
            {
                message.error('请至少填写一项条件再进行搜索');
            } else { 
                this.setState({
                    tableLoading: true,
                });
                let columnData = [];
                getAllBlueTeethDeviceByConditionApi(values)
                    .then(res => {
                        //console.log(res.data);
                        res.data.forEach((item, index) => {
                            if (item.macAddress.split(':').length == 3) {
                                let macAddressId = (item.macAddress.split(':'))[1];
                                columnData.push({
                                    key: index + 1,
                                    id: item.id,
                                    macAddress: item.macAddress,
                                    macAddressId: macAddressId,
                                    devicePower: item.devicePower,
                                    createTime: item.createTime,
                                    category: item.category,
                                    deviceName: item.deviceName,
                                    validTime: item.validTime,
                                    used: item.used,
                                    type: item.type,
                                    departmentName: item.departmentName
                                });
                            } else {
                                columnData.push({
                                    key: index + 1,
                                    id: item.id,
                                    macAddress: item.macAddress,
                                    macAddressId: item.macAddress,
                                    devicePower: item.devicePower,
                                    createTime: item.createTime,
                                    category: item.category,
                                    deviceName: item.deviceName,
                                    validTime: item.validTime,
                                    used: item.used,
                                    type: item.type,
                                    departmentName: item.departmentName
                                });
                            }
                        })
                        //console.log(tableData, "!!!!!!!")
                        this.setState({
                            columnData: columnData,
                            tableLoading: false
                        });
                    })
                    .catch(e => {
                        if (e.response) {
                            //请求已发出，服务器返回状态码不是2xx。
                            console.info(e.response.data);
                            console.info(e.response.status);
                            console.info(e.response.headers);
                        } else if (e.request) {
                            // 请求已发出，但没有收到响应
                            // e.request 在浏览器里是一个XMLHttpRequest实例，
                            // 在node中是一个http.ClientRequest实例
                            console.info(e.request);
                        } else {
                            //发送请求时异常，捕捉到错误
                            console.info("error", e.message);
                        }
                        console.info(e.config);
                    });
            }

        })
    }

    searchReset = () => { 
        this.props.form.resetFields();
        this.refreshData();
    }

    handleSearch = (selectedKeys, confirm) => () => {
        confirm();
        // this.setState({ searchText: selectedKeys[0] });
    }

    handleReset = clearFilters => () => {
        clearFilters();
        // this.setState({ searchText: '' });
    }

    //关闭 alert 的提示
    handleClose() {
        this.setState({ alertVisible: false });
    }

    clearAll = () => {
        this.setState({
            filteredInfo: null,
            sortedInfo: null,
        });
    }

    handleChange = (pagination, filters, sorter) => {
        //console.log('Various parameters', pagination, filters, sorter);
        this.setState({
            filteredInfo: filters,
            sortedInfo: sorter,
        });
    }

    render() {
        let { sortedInfo, filteredInfo } = this.state;
        sortedInfo = sortedInfo || {};
        filteredInfo = filteredInfo || {};
        const { getFieldDecorator, getFieldValue } = this.props.form;
        let allDepartment = [];

        this.state.members.forEach((item, index) => {
            if(item.name != "") {
                allDepartment.push(item.name);
            }
        });
        let columns = [
            {
                title: "序号",
                dataIndex: "key",
                key: "key"
            },
            {
                title: "单位",
                dataIndex: "departmentName",
                key: "departmentName",
            },
            {
                title: "设备编号",
                dataIndex: "macAddressId",
                key: "macAddressId",
                sorter: (a, b) => {
                    if (a.macAddressId < b.macAddressId) {
                        return -1;
                    } else if (a.macAddressId > b.macAddressId) {
                        return 1;
                    } else {
                        return 0;
                    }
                },
                sortOrder: sortedInfo.columnKey === 'macAddress' && sortedInfo.order,
                filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                    <div className="custom-filter-dropdown">
                        <Input
                            ref={ele => this.searchInput = ele}
                            value={selectedKeys[0]}
                            onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                            onPressEnter={this.handleSearch(selectedKeys, confirm)}
                        />
                        <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                        <Button onClick={this.handleReset(clearFilters)}>重置</Button>
                    </div>
                ),
                filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
                onFilter: (value, record) => record.macAddressId.toLowerCase().includes(value.toLowerCase()),
                onFilterDropdownVisibleChange: (visible) => {
                    if (visible) {
                        setTimeout(() => {
                            this.searchInput.focus();
                        });
                    }
                }
            }, {
                title: "电量",
                dataIndex: "devicePower",
                key: "devicePower",
                sorter: (a, b) => parseInt(a.devicePower) - parseInt(b.devicePower),
                sortOrder: sortedInfo.columnKey === 'devicePower' && sortedInfo.order,
                render: (text) => {
                    if (parseInt(text) < 0) {
                        return <Tag color='red'>未能检测到</Tag>
                    } else {
                        return (
                            <div>
                                <img
                                    style={{ width: '30px', height: '30px' }}
                                    src={require('../img/battery' + parseInt(text / 20) + '.png')} />{text + '% '}
                            </div>)
                    }
                }
            }, {
                title: "使用情况",
                dataIndex: "used",
                key: "used",
                filters: this.state.usedFilter,
                filteredValue: filteredInfo.used || null,
                onFilter: (value, record) => record.used == value,
                filterIcon: filtered => <Icon type="filter" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
                render: (text, record) => (
                    <div>
                        {record.used == 0 ?
                            (<Tag color={'#108ee9'}>备用</Tag>) : (<Tag color={'#87d068'}>使用中</Tag>)}
                    </div>
                )
            }, {
                title: "入库时间",
                dataIndex: "createTime",
                key: "createTime",
                sorter: (a, b) => new Date(a.createTime).getTime() - new Date(b.createTime).getTime(),
                sortOrder: sortedInfo.columnKey === 'createTime' && sortedInfo.order,
            },
            {
                title: "设备类型",
                dataIndex: "type",
                key: "type",
                render:(text, record)=>(
                    <div>
                        {record.type == 0 ?
                            (<Tag color={'#108ee9'}>蓝牙</Tag>) : (<Tag color={'#87d068'}>NFC</Tag>)}
                    </div>
                ),
            },
            {
                title: "有效日期",
                dataIndex: "validTime",
                key: "validTime",
            },
        ];

        let labelCol = {
            sm: { span: 6 },
            xl: { span: 6 },
            xxl: { span: 5 },
        };

        let wrapperCol = {
            sm: { span: 18 },
            xl: { span: 18 },
            xxl: { span: 19 },
        };

        return (
            <div>
                <Form
                    style={{
                        padding: '12px',
                        backgroundColor: '#fafafa',
                        borderRadius: 8,
                        marginBottom: 16
                    }}
                    layout="inline"
                    onSubmit={this.searchSubmit}>
                    <Row>
                        <Col span={8}>
                            <Form.Item
                                label="设备类型"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("type", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <Select style={{ width: '100%' }} placeholder="选择设备类型">
                                        <Option value="0">蓝牙</Option>
                                        <Option value="1">NFC</Option>
                                    </Select>
                                )}
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item
                                label="单位"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("departmentName", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <AutoComplete
                                        allowClear={true}
                                        style={{ width: '100%' }}
                                        dataSource={allDepartment}
                                        placeholder="选择设备所属单位"
                                        filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
                                    />
                                )}
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item
                                label="设备编号"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("macAddressId", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <Input
                                        allowClear={true}
                                        style={{ width: '100%' }}
                                        placeholder="请输入设备编号"
                                    ></Input>
                                )}
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row>
                        <Form.Item
                            style={{ float: 'right', marginTop: 16}}>
                            <Button type="primary" htmlType="submit">搜索</Button>
                            <Button style={{ marginLeft: 8 }} onClick={this.searchReset}>清空</Button>
                        </Form.Item>
                    </Row>
                </Form>
                <div style={{ marginBottom: 16 }}>
                </div>
                <Table
                    dataSource={this.state.columnData}
                    columns={columns}
                    loading={this.state.tableLoading}
                    locale={{ emptyText: '暂无数据' }}
                    onChange={this.handleChange}
                    rowClassName={(record, index) => index % 2 === 0 ? "rowOne" : "rowTwo"}
                    pagination={{  //分页
                        total: this.state.data.length, //数据总数量
                        defaultPageSize: 10, //默认显示几条一页
                        //pageSize: 10,
                        showTotal: function (total) {  //设置显示一共几条数据
                            return '共 ' + total + ' 条数据';
                        },
                        showSizeChanger: true,
                        showQuickJumper: true,
                        pageSizeOptions: [5, 10, 20, 30]
                    }} />
            </div>
        )
    }
}

const BlueteethDeviceManagerTotal = Form.create()(blueteethDeviceManagerTotal);

class blueteethDeviceQuery extends Component {
    constructor(props) {
        super(props);
        this.state = {
            districtDepartment: [],
            addVisible: false,
            alertVisible: false,
            confirmLoading: false,
            msg: "", //提交失败时的提示语
            // searchText: '',
            tableLoading: false,
            data: [],
            filteredInfo: null,
            sortedInfo: null,
            nowMajor: undefined,
            usedFilter: [{
                text: '使用中',
                value: 1
            },
            {
                text: '备用',
                value: 0
            }],
            members:[]
        }
    }

    componentDidMount() {
        let districtDepartment = [];
        getRootDepartmentApi()
        .then((res) => {
            res.data.forEach((item) => {
                districtDepartment.push({
                    value: item.id,
                    name: item.name
                });
            });
            this.setState({
                districtDepartment: districtDepartment
            });
        })
        .catch((e) => {
            if (e.response) {
                //请求已发出，服务器返回状态码不是2xx。
                console.info(e.response.data)
                console.info(e.response.status)
                console.info(e.response.headers)
            } else if (e.request) {
                // 请求已发出，但没有收到响应
                // e.request 在浏览器里是一个XMLHttpRequest实例，
                // 在node中是一个http.ClientRequest实例
                console.info(e.request)
            } else {
                //发送请求时异常，捕捉到错误
                console.info('error', e.message)
            }
            console.info(e.config)
        });
        this.refreshData();
    }

   
    refreshData() {
        
    }

    searchSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => { 
            this.setState({
                tableLoading: true,
            });
            let columnData = [];
            countBluetoothTypeNumberBySchoolIdApi(values.parentId)
                .then((res) => {
                    res.data.forEach((item, index) => {
                        columnData.push({
                            key: index + 1,
                            departmentId: item.departmentId,
                            departmentName: item.departmentName,
                            patrolBluetoothNum: item.patrolBluetoothNum,
                            inspectionBluetoothNum: item.inspectionBluetoothNum,
                            dutyweekBluetoothNum: item.dutyweekBluetoothNum,
                        });
                    });
                    this.setState({
                        columnData: columnData,
                        tableLoading: false
                    });
                })
                .catch((e) => {
                    if (e.response) {
                        //请求已发出，服务器返回状态码不是2xx。
                        console.info(e.response.data)
                        console.info(e.response.status)
                        console.info(e.response.headers)
                    } else if (e.request) {
                        // 请求已发出，但没有收到响应
                        // e.request 在浏览器里是一个XMLHttpRequest实例，
                        // 在node中是一个http.ClientRequest实例
                        console.info(e.request)
                    } else {
                        //发送请求时异常，捕捉到错误
                        console.info('error', e.message)
                    }
                    console.info(e.config)
                });
        })
    }

    searchReset = () => { 
        this.props.form.resetFields();
        this.refreshData();
    }

    handleSearch = (selectedKeys, confirm) => () => {
        confirm();
        // this.setState({ searchText: selectedKeys[0] });
    }

    handleReset = clearFilters => () => {
        clearFilters();
        // this.setState({ searchText: '' });
    }

    //关闭 alert 的提示
    handleClose() {
        this.setState({ alertVisible: false });
    }

    clearAll = () => {
        this.setState({
            filteredInfo: null,
            sortedInfo: null,
        });
    }

    handleChange = (pagination, filters, sorter) => {
        //console.log('Various parameters', pagination, filters, sorter);
        this.setState({
            filteredInfo: filters,
            sortedInfo: sorter,
        });
    }

    render() {
        const avaliableDistrict = this.state.districtDepartment.map((d, index) =>
        <Option value={d.value} key={index}>
            {d.name}
        </Option>);

        let { sortedInfo, filteredInfo } = this.state;
        sortedInfo = sortedInfo || {};
        filteredInfo = filteredInfo || {};
        const { getFieldDecorator, getFieldValue } = this.props.form;

        
        let columns = [
            {
                title: "序号",
                dataIndex: "key",
                key: "key"
            },
            {
                title: "学校名称",
                dataIndex: "departmentName",
                key: "departmentName",
            },
            {
                title: "巡更蓝牙数",
                dataIndex: "patrolBluetoothNum",
                key: "patrolBluetoothNum",
            },
            {
                title: "巡检蓝牙数",
                dataIndex: "inspectionBluetoothNum",
                key: "inspectionBluetoothNum",
            },
            {
                title: "值周蓝牙数",
                dataIndex: "dutyweekBluetoothNum",
                key: "dutyweekBluetoothNum",
            },
        ];

        let labelCol = {
            sm: { span: 6 },
            xl: { span: 6 },
            xxl: { span: 5 },
        };

        let wrapperCol = {
            sm: { span: 18 },
            xl: { span: 18 },
            xxl: { span: 19 },
        };

        return (
            <div>
                <Form
                    style={{
                        padding: '12px',
                        backgroundColor: '#fafafa',
                        borderRadius: 8,
                        marginBottom: 16
                    }}
                    layout="inline"
                    onSubmit={this.searchSubmit}>
                    <Form.Item 
                        label="区县"
                        style={{ width: '30%' }}
                        labelCol={labelCol}
                        wrapperCol={wrapperCol}
                        >
                        {getFieldDecorator('parentId', {
                            rules: [
                                {
                                    required: true,
                                    message: '请选择一个区县',
                                },
                            ],
                        })(<Select
                            style={{
                                width: '100%'
                            }}
                            // size="large"
                            placeholder="选择区县">
                            {avaliableDistrict}
                        </Select>)}
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">搜索</Button>
                        <Button type="primary" style={{ marginLeft: 8 }} onClick={() =>  {
                                exportExcel(columns, this.state.columnData, "蓝牙设备数量统计.xlsx")}
                                }>数据导出</Button>
                        <Button style={{ marginLeft: 8 }} onClick={this.searchReset}>清空</Button>
                    </Form.Item>

                </Form>
                <div style={{ marginBottom: 16 }}>
                </div>
                <Table
                    dataSource={this.state.columnData}
                    columns={columns}
                    loading={this.state.tableLoading}
                    locale={{ emptyText: '暂无数据' }}
                    onChange={this.handleChange}
                    rowClassName={(record, index) => index % 2 === 0 ? "rowOne" : "rowTwo"}
                    pagination={{  //分页
                        total: this.state.data.length, //数据总数量
                        defaultPageSize: 10, //默认显示几条一页
                        //pageSize: 10,
                        showTotal: function (total) {  //设置显示一共几条数据
                            return '共 ' + total + ' 条数据';
                        },
                        showSizeChanger: true,
                        showQuickJumper: true,
                        pageSizeOptions: [5, 10, 20, 30]
                    }} />
            </div>
        )
    }
}

const BlueteethDeviceQuery = Form.create()(blueteethDeviceQuery);

class schoolSafetySceneManagerTotal extends Component {//安全现场
    constructor(props) {
        super(props);
        this.state = {
            updateVisible: false,
            detailVisible: false,
            alertVisible: false, //提示
            confirmLoading: false,
            msg: "", //提交失败时的提示语
            tableLoading: true,
            data: [],
            filteredInfo: null,
            sortedInfo: null,
            // searchTextAddress: '',
            // searchTextReporter: '',
            allCategory: [],
            allStatus: [],

            isSearch: false,
            existCategory: [],
            searchData: [],

            searchChartLoading: true,
            chartSafetySceneSearchData: {}
        };

    }

    componentDidMount() {
        this.refreshData();
        const allDepartment = [];
        SchoolAllApi()
            .then((res) => {
                res.data.forEach((item, index) => {
                    //console.log("getAllUser", item);
                    allDepartment.push(item.name);
                });
                this.setState({
                    allDepartment: allDepartment
                })
            })
    }

    refreshData() {
        this.setState({
            tableLoading: true
        });
        let columnData = [];
        let statusData = [];
        getAllsafetysceneApi()
            .then((res) => {
                if (res.data) {
                    res.data.forEach((item, index) => {
                        let safetyLevelName;
                        switch (item.safetyLevel) {
                        case 1:
                            safetyLevelName = "安全"
                            break;
                        case 2:
                            safetyLevelName = "一般"
                            break;
                        case 3:
                            safetyLevelName = "危险"
                            break;
                        case 4:
                            safetyLevelName = "非常危险"
                            break;
                        case 5:
                            safetyLevelName = "巡检排查"
                            break;
                        default:
                            break;
                        }
                        columnData.push({
                            key: index + 1,
                            id: item.id,
                            safetyLevel: item.safetyLevel,
                            safetyLevelName: safetyLevelName,
                            address: item.address,
                            reporterId: item.reporter,
                            reporterName: item.reportName,
                            status: item.statusString,
                            createTime: item.createTime,
                            modifyTime: item.modifyTime,
                            categoryId: item.categoryId,
                            categoryName: item.categoryName,
                            dealName: item.dealName,
                            departmentName: item.departmentName,
                            content: item.content
                        });
                        statusData.push(item.statusString);
                    });
                }
                this.setState({
                    columnData: columnData,
                    tableLoading: false,
                    preData: columnData
                });
                let statusDataUnique = statusData.filter(function (element, index, array) {
                    return array.indexOf(element) === index;
                });
                let allStatus = statusDataUnique.map((d, index) => {
                    return ({
                        text: d,
                        value: d,
                    })
                })
                this.setState({
                    allStatus: allStatus,
                });
                
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

       
        getAllExistCategoryApi()
            .then((res) => {
                let categories = [];
                res.data.forEach((item, index) => {
                    let temp = {
                        text: item.category,
                        value: item.category,
                    }
                    categories.push(temp);
                });
                this.setState({
                    existCategory: res.data,
                    allCategory: categories
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }

    formatTime(date) {
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const hour = date.getHours();
        const minute = date.getMinutes();
        const second = date.getSeconds();
        return [year, month, day].map(this.formatNumber).join('-') + ' ' + [hour, minute, second].map(this.formatNumber).join(':');
    }

    formatNumber(n) {
        n = n.toString();
        return n[1] ? n : '0' + n;
    }

    showDetailModal(id, safetyLevel, address, reporterName, status,
        createTime, modifyTime, categoryName) {
        let level = "";
        switch (safetyLevel) {
        case 1: level = "安全"; break;
        case 2: level = "一般"; break;
        case 3: level = "危险"; break;
        case 4: level = "非常危险"; break;
        case 5: level = "巡检排查"; break;
        }
        this.setState({
            detailVisible: true,
            currentId: id,
            currentSafetyLevel: level,
            currentAddress: address,
            currentReporterName: reporterName,
            currentStatus: status,
            currentCreateTime: createTime,
            currentModifyTime: modifyTime,
            currentCategoryName: categoryName,
        })
    }

    //关闭 alert 的提示
    handleClose() {
        this.setState({ alertVisible: false });
    }
    //关闭模态框
    handleUpdateCancel() {
        let val = this.refs.updateSafetysceneFormValue;
        val.resetFields();
        this.setState({
            alertVisible: false,
            updateVisible: false,
        });
    }
    //关闭模态框
    handleDetailCancel() {
        this.setState({
            alertVisible: false,
            detailVisible: false,
        });
    }

    clearAll = () => {
        this.setState({
            filteredInfo: null,
            sortedInfo: null,
        });

    }

    handleChange = (pagination, filters, sorter) => {
        //console.log('Various parameters', pagination, filters, sorter);
        this.setState({
            filteredInfo: filters,
            sortedInfo: sorter,
        });
    }

    handleSearch = (selectedKeys, confirm) => () => {
        confirm();
        // this.setState({
        //     searchTextAddress: selectedKeys[0],
        //     searchTextReporter: selectedKeys[0]
        // });
    }

    handleSearchReset = clearFilters => () => {
        clearFilters();
        // this.setState({
        //     searchTextAddress: '',
        //     searchTextReporter: '',
        // });
    }

    searchSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (values.departmentName == undefined && values.address == undefined && values.categoryId == undefined && values.safetyLevel == undefined
                && values.reporterName == undefined && values.status == undefined && values.createTime == undefined
                && values.modifyTime == undefined && values.dealName == undefined) {
                message.error('请至少填写一项条件再进行搜索');
            } else {
                this.setState({
                    tableLoading: true,
                    isSearch: true,
                });

                if (values.categoryId !== undefined && values.categoryId.length == 0) {
                    values.categoryId = undefined;
                }

                if (values.safetyLevel !== undefined && values.safetyLevel.length == 0) {
                    values.safetyLevel = undefined;
                }

                if (values.createTime == undefined || values.createTime.length == 0) {
                    values.reportStartDate = undefined;
                    values.reportEndDate = undefined;
                } else {
                    values.reportStartDate = moment(values.createTime[0]).format('YYYY-MM-DD');
                    values.reportEndDate = moment(values.createTime[1]).format('YYYY-MM-DD');
                }

                if (values.modifyTime == undefined || values.modifyTime.length == 0) {
                    values.dealStartDate = undefined;
                    values.dealEndDate = undefined;
                } else {
                    values.dealStartDate = moment(values.modifyTime[0]).format('YYYY-MM-DD');
                    values.dealEndDate = moment(values.modifyTime[1]).format('YYYY-MM-DD');
                }

                let columnData = [];
                let safetyLevelName;
                getAllSafetySceneByConditionApi(values)
                    .then((res) => {
                        res.data.forEach((item, index) => {
                            switch (item.safetyLevel) {
                            case 1:
                                safetyLevelName = "安全"
                                break;
                            case 2:
                                safetyLevelName = "一般"
                                break;
                            case 3:
                                safetyLevelName = "危险"
                                break;
                            case 4:
                                safetyLevelName = "非常危险"
                                break;
                            case 5:
                                safetyLevelName = "巡检排查"
                                break;
                            default:
                                break;
                            }
                            columnData.push({
                                key: index + 1,
                                id: item.id,
                                safetyLevel: item.safetyLevel,
                                safetyLevelName: safetyLevelName,
                                address: item.address,
                                reporterId: item.reporter,
                                reporterName: item.reportName,
                                status: item.statusString,
                                createTime: item.createTime,
                                modifyTime: item.modifyTime,
                                categoryId: item.categoryId,
                                categoryName: item.categoryName,
                                dealName: item.dealName,
                                departmentName: item.departmentName,
                                content: item.content
                            });
                        });

                        this.setState({
                            columnData: columnData,
                            tableLoading: false,
                        });
                    })
                    .catch((e) => {
                        if (e.response) {
                            //请求已发出，服务器返回状态码不是2xx。
                            console.info(e.response.data)
                            console.info(e.response.status)
                            console.info(e.response.headers)
                        } else if (e.request) {
                            // 请求已发出，但没有收到响应
                            // e.request 在浏览器里是一个XMLHttpRequest实例，
                            // 在node中是一个http.ClientRequest实例
                            console.info(e.request)
                        } else {
                            //发送请求时异常，捕捉到错误
                            console.info('error', e.message)
                        }
                        console.info(e.config)
                    });
            }
        });
    }

    searchReset = () => {
        this.props.form.resetFields();
        this.setState({
            isSearch: false,
            columnData: this.state.preData,
        })
    }

    render() {
        const { getFieldDecorator, getFieldValue } = this.props.form;
        let { sortedInfo, filteredInfo } = this.state;
        sortedInfo = sortedInfo || {};
        filteredInfo = filteredInfo || {};

        let keyWidth = undefined;
        let categoryNameWidth = undefined;
        let reporterNameWidth = undefined;
        let statusWidth = undefined;
        let actionWidth = undefined;
        let timeWidth = undefined;

        let winWidth;
        // 获取窗口宽度
        if (window.innerWidth)
            winWidth = window.innerWidth;
        else if ((document.body) && (document.body.clientWidth))
            winWidth = document.body.clientWidth;
        if (winWidth < 1500) {
            keyWidth = 60;
            categoryNameWidth = 110;
            reporterNameWidth = 90;
            statusWidth = 80;
            actionWidth = 110;
            timeWidth = 120;
        }

        const header = [
            {
                title: "序号",
                dataIndex: "key",
                key: "key"
            },
            {
                title: "单位",
                dataIndex: "departmentName",
                key: "departmentName"
            },
            {
                title: "地址",
                dataIndex: "address",
                key: "address",
            },
            {
                title: "安全等级",
                dataIndex: "safetyLevelName",
                key: "safetyLevelName"
            },
            {
                title: "隐患内容",
                dataIndex: "content",
                key: "content"
            },
            {
                title: "上报人",
                dataIndex: "reporterName",
                key: "reporterName"
            },
            {
                title: "状态",
                dataIndex: "status",
                key: "status"
            },
            {
                title: "上报时间",
                dataIndex: "createTime",
                key: "createTime"
            },
            {
                title: "处理时间",
                dataIndex: "modifyTime",
                key: "modifyTime"
            },
            {
                title: "处理人",
                dataIndex: "dealName",
                key: "dealName"
            },
        ]

        const columns = [{
            title: "序号",
            dataIndex: "key",
            key: "key",
            width: keyWidth,
        }, {
            title: "单位",
            dataIndex: "departmentName",
            key: "departmentName",
            width: 120
        }, {
            title: "地址",
            dataIndex: "address",
            key: "address",
            width: 120
        }, {
            title: "项目类别",
            dataIndex: "categoryName",
            key: "categoryName",
            width: categoryNameWidth,
        }, {
            title: "安全等级",
            dataIndex: "safetyLevel",
            key: "safetyLevel",
            sorter: (a, b) => a.safetyLevel - b.safetyLevel,
            sortOrder: sortedInfo.columnKey === 'safetyLevel' && sortedInfo.order,
            render: (text) => (
                <div style={{ width: '90px' }}>
                    <img
                        style={{ width: '100%' }}
                        src={require('../img/safetyLevel' + text + '.png')} />
                </div>
            )
        }, {
            title: "上报人",
            dataIndex: "reporterName",
            key: "reporterName",
            width: reporterNameWidth,
        }, {
            title: "状态",
            dataIndex: "status",
            key: "status",
            width: statusWidth,
            render: (text) => {
                if (text == '已处理') { return (<span style={{ color: 'green' }}>已处理</span>) }
                else if (text == '未处理') { return (<span style={{ color: 'red' }}>未处理</span>) }
                else if (text == '处理中') { return (<span style={{ color: '#096dd9' }}>处理中</span>) }
            },
        }, {
            title: "上报时间",
            dataIndex: "createTime",
            key: "createTime",
            width: timeWidth,
            sorter: (a, b) => new Date(a.createTime).getTime() - new Date(b.createTime).getTime(),
            sortOrder: sortedInfo.columnKey === 'createTime' && sortedInfo.order,
        }, {
            title: "处理时间",
            dataIndex: "modifyTime",
            key: "modifyTime",
            width: timeWidth,
            sorter: (a, b) => new Date(a.modifyTime).getTime() - new Date(b.modifyTime).getTime(),
            sortOrder: sortedInfo.columnKey === 'modifyTime' && sortedInfo.order,
            render: (text, record) => {
                if (record.status == '已处理') { return (<span>{text}</span>) }
                else if (record.status == '未处理') { return (<span>-</span>) }
            },
        }, {
            title: "处理人",
            dataIndex: "dealName",
            key: "dealName",
            width: reporterNameWidth,
            filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                <div className="custom-filter-dropdown">
                    <Input
                        ref={ele => this.searchInput = ele}
                        value={selectedKeys[0]}
                        onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                        onPressEnter={this.handleSearch(selectedKeys, confirm)}
                    />
                    <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                    <Button onClick={this.handleSearchReset(clearFilters)}>重置</Button>
                </div>
            ),
            filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
            onFilter: (value, record) => record.reporterName.toLowerCase().includes(value.toLowerCase()),
            onFilterDropdownVisibleChange: (visible) => {
                if (visible) {
                    setTimeout(() => {
                        this.searchInput.focus();
                    });
                }
            },
            render: (text, record) => {
                if (record.status == '未处理') { return (<span>-</span>) }
                else {
                    return (<span>{text}</span>)
                }
            }
        }];

        let categoryOptions;
        if (this.state.existCategory.length != 0) {
            categoryOptions = this.state.existCategory.map((d, index) =>
                <Option value={d.id} key={index}>{d.category}</Option>
            );
        }

        let statusOptions;
        if (this.state.allStatus.length != 0) {
            statusOptions = this.state.allStatus.map((d, index) =>
                <Option value={d.value} key={index}>{d.value}</Option>
            );
        }

        let labelCol = {
            sm: { span: 6 },
            xl: { span: 6 },
            xxl: { span: 5 },
        };

        let wrapperCol = {
            sm: { span: 18 },
            xl: { span: 18 },
            xxl: { span: 19 },
        };

        return (
            <div style={{ marginBottom: 16 }}>
                <Form
                    style={{
                        padding: '12px',
                        backgroundColor: '#fafafa',
                        borderRadius: 8,
                        marginBottom: 16
                    }}
                    layout="inline"
                    onSubmit={this.searchSubmit}>
                    <Row>
                        <Col span={8}>
                            <FormItem
                                label="单位"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("departmentName", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <AutoComplete
                                        allowClear={true}
                                        style={{ width: '100%' }}
                                        dataSource={this.state.allDepartment}
                                        placeholder="选择设备所属单位"
                                        filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
                                    />
                                )}
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem
                                label="地址"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("address", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <Input
                                        allowClear={true}
                                        style={{ width: '100%' }}
                                        placeholder="请输入地址"
                                    ></Input>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem
                                label="项目类别"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("categoryId", {
                                    rules: [{
                                        type: 'array',
                                        required: false,
                                    }]
                                })(
                                    <Select
                                        style={{ width: '100%' }}
                                        mode="multiple"
                                        placeholder="请选择项目类别(可多选)">
                                        {categoryOptions}
                                    </Select>
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={8}>
                            <FormItem
                                label="安全等级"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("safetyLevel", {
                                    rules: [{
                                        type: 'array',
                                        required: false,
                                    }]
                                })(
                                    <Select
                                        style={{ width: '100%' }}
                                        mode="multiple"
                                        placeholder="请选择安全等级(可多选)">
                                        <Option value={1}>安全</Option>
                                        <Option value={2}>一般</Option>
                                        <Option value={3}>危险</Option>
                                        <Option value={4}>非常危险</Option>
                                        <Option value={5}>巡检排查</Option>
                                    </Select>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem
                                label="上报人"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("reporterName", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <Input
                                        allowClear={true}
                                        style={{ width: '100%' }}
                                        placeholder="请输入上报人"
                                    ></Input>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem
                                label="上报时间"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("createTime", {
                                    rules: [{
                                        type: 'array',
                                        required: false,
                                    }]
                                })(
                                    <RangePicker
                                        style={{ width: '100%' }}
                                        format="YYYY-MM-DD" />
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={8}>
                            <FormItem
                                label="处理时间"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("modifyTime", {
                                    rules: [{
                                        type: 'array',
                                        required: false,
                                    }]
                                })(
                                    <RangePicker
                                        style={{ width: '100%' }}
                                        format="YYYY-MM-DD" />
                                )}
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem
                                label="处理人"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("dealName", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <Input
                                        allowClear={true}
                                        style={{ width: '100%' }}
                                        placeholder="请输入处理人"
                                    ></Input>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem
                                label="状态"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("status", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <Select
                                        allowClear={true}
                                        style={{ width: '100%' }}
                                        placeholder="请选择状态">
                                        {statusOptions}
                                    </Select>
                                )}
                            </FormItem>
                        </Col>
                        <FormItem
                            style={{ float: 'right' }}>
                            <Button type="primary" htmlType="submit">搜索</Button>
                            <Button style={{ marginLeft: 8 }} onClick={this.searchReset}>清空</Button>
                        </FormItem>
                    </Row>
                    <Button type="primary" style={{ marginLeft: 8 }} onClick={() =>  {
                        betterExportExcel(header, this.state.columnData, "安全隐患信息")
                    }}>安全隐患信息导出Excel
                    </Button>
                </Form>
                <Table
                    dataSource={this.state.columnData}
                    columns={columns}
                    loading={this.state.tableLoading}
                    locale={{ emptyText: '暂无数据' }}
                    rowClassName={(record, index) => index % 2 === 0 ? "rowOne" : "rowTwo"}
                    onChange={this.handleChange}
                    pagination={{  //分页
                        total: this.state.data.length, //数据总数量
                        defaultPageSize: 10, //默认显示几条一页
                        //pageSize: 10,
                        showTotal: function (total) {  //设置显示一共几条数据
                            return '共 ' + total + ' 条数据';
                        },
                        showSizeChanger: true,
                        showQuickJumper: true,
                        pageSizeOptions: [5, 10, 20, 30]
                    }} />
            </div>
        )
    }
}
const SchoolSafetySceneManagerTotal = Form.create()(schoolSafetySceneManagerTotal);